Question

您好我是JavaScript的新用户，我可以告诉我JQuery在我向下滚动的同时将导航栏固定在顶部。我使用以下代码，但我认为缺少一些内容

代码段：

var fixmeTop = $('.fixme').offset().top; 
$(window).scroll(function() { 
    var currentScroll = $(window).scrollTop(); 
    if (currentScroll >= fixmeTop) { 
        $('.fixme').css({ position: 'fixed', top: '0', left: '0' }); 
    } 
    else { 
        $('.fixme').css({ position: 'static' }); 
    } 
});

Answer 1

$( document ).ready(function() {
   var fixmeTop = $('.fixme').offset().top;
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll > fixmeTop) {
            $('.fixme').css({position: 'fixed', top: '0', left: '0'});
        } else {
            $('.fixme').css({position: 'static'});
        }
    });

});

Answer 2

如果您希望它始终固定，请使用以下内容：

.class_name {
    position: fixed;
}

如果你只想在滚动时修复它，但是当你在页面顶部时它是相对的，那么使用类似的东西：

$('body').scroll(function(){

 var $class_name = $('.class_name');

 if($(this).scrollTop() >= $class_name.height()) {
  $class_name.addClass('scrolled');
 }
});

然后，您可以使用css根据元素上的类更改位置。

.class_name.scrolled {
    position: fixed;
}

如果您将transition css结合使用，则可以顺利为其制作动画。

JQuery用于导航栏的固定位置

2 个答案: