// 设置顶部位置
$('#element').css('top', '50px');

// 设置底部位置
$('#element').css('bottom', '20px');

// 同时设置顶部和底部
$('#element').css({
  'top': '50px',
  'bottom': 'auto' // 如果要取消底部设置
});

// 获取当前偏移
var offset = $('#element').offset();
console.log(offset.top); // 顶部位置

// 设置新的偏移
$('#element').offset({ top: 100 });

var position = $('#element').position();
console.log(position.top); // 相对于父元素的顶部位置

// 确保元素有正确的定位
$('#element').css('position', 'absolute');

// 然后设置位置
$('#element').css('top', '50px');

$('#element').animate({
  top: '50px',
  bottom: '20px'
}, 500); // 500毫秒的动画时间

// 确保元素可见时获取位置
if ($('#element').is(':visible')) {
  var topPos = $('#element').offset().top;
  console.log(topPos);
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('#navbar').css('top', '0');
  } else {
    $('#navbar').css('top', '-50px');
  }
});

function centerModal() {
  var modal = $('#myModal');
  modal.css('top', ($(window).height() - modal.outerHeight()) / 2 + $(window).scrollTop() + "px");
}

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('#sidebar').css({
      'top': 'auto',
      'bottom': '0'
    });
  } else {
    $('#sidebar').css({
      'top': '0',
      'bottom': 'auto'
    });
  }
});

// 定义CSS类
.fixed-top {
  position: fixed;
  top: 0;
  bottom: auto;
}

// 使用jQuery添加/移除类
$('#element').addClass('fixed-top');

$('#element').css('transform', 'translateY(50px)');

function animateTop() {
  var element = $('#element');
  var start = null;
  
  function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var newTop = Math.min(progress / 10, 200);
    element.css('top', newTop + 'px');
    if (progress < 2000) {
      window.requestAnimationFrame(step);
    }
  }
  
  window.requestAnimationFrame(step);
}