修复了带有滚动条的菜单滚动并停在顶部

Question

菜单（黑色）是固定的位置，偏移页眉的边距顶部高度。菜单偏移顶部边距在滚动时上升，但它也应该在到达顶部时停止。 demo link

$(window).scroll(function(){
  var y = $(window).scrollTop();
  var headerHeight = $('.header').height();
  var bgp = $(window).scrollTop();
   var result =  headerHeight-bgp;

  if(y > 0 ){
      $('.menu').css({'top': + result +'px'});  
  } else{
    $('.menu').css({'top': + headerHeight +'px'}); 
  }
});

Answer 1

这是您的预期输出：

$(window).scroll(function(){
      var y = $(window).scrollTop();
      var headerHeight = $('.header').height();
      var bgp = $(window).scrollTop();
      //var mtv = $('.menu').position().top;
       var result =  headerHeight-bgp;

      if(result > 0 ){
          $('.menu').css({'top': + result +'px'});  

      } else{
          console.log("stop");
        $('.menu').css({'top':  0}); 
      }
    });

勾选Fiddle Here.

Answer 2

    $(window).scroll(function(){
        var y = $(window).scrollTop();
        var result =  150-y;

        if(result > 0 ){
            $('.menu').css({'top': + result +'px'});  
        } else{
            $('.menu').css({'top': + 0 +'px'}); 
        }
    });

这样做更简单。 https://jsfiddle.net/g6wfy740/10/

修复了带有滚动条的菜单滚动并停在顶部

fixed menu scroller with scrollbar and stop on top

html

css

jquery

scroll