固定菜單位置在滾動條上

Question

菜單是固定的，並且與標題的頂部高度偏移。 但是當我滾動標題時，它就因為不固定而上升。 因此，菜單也應該滾動顯示。

在這里找到演示

我只希望向下滾動時，菜單頂部的偏移量不存在。

$(window).scroll(function(){
  var y = $(window).scrollTop();
  var bgp = $(window).scrollTop();
  var mtv = $('.menu').position().top;
  if(y > 0){
    $('.menu').css({'top': + mtv-bgp +'px'});  
  } else{
    $('.menu').css({'top': + bgp-mtv+'px'}); 
  }
});

Answer 1

如果我得到您想要的正確信息，那么這應該對您有幫助：

body{
    margin:0;
    padding:0;
}
.header{
    background:#ddd;
    height:80px;
    position:relative;
}
.container{
    height:1000px;
    background:#eee;
    position:relative;
    width:100%;
}
.menu{
    background:#000;
    width:200px;
    height:100%;
    left:0;
    top:80px;
    position:fixed;
    z-index:11;
    transition: all 0.6s ease;
}
#toggle{
    width:50px;
    height:50px;
    background:yellow;
    float:left;
    margin:10px 20px;
}

和js

   $(window).scroll(function(){
      var y = $('body').scrollTop();
      if(y > 80){
        $('.menu').css({'top':'0px'});  
      } 
        else if(y<80)
            $('.menu').css({'top':'80px'}); 
    });

我還更新了您的朋友： https ://jsfiddle.net/g6wfy740/2/