Question

我有一个侧面菜单，需要滚动页面，但在它下面是更多的元素。菜单滚动浏览这些元素，这不是我想要的。因此，当菜单点击其下方的元素时，它应该停止与页面一起滚动。

如何做到这一点？我需要使用jquery吗？或者我可以使用css唯一的技巧，也许是z-index的东西？

Answer 1

这是一个有效的解决方案： https://jsfiddle.net/3w1pvhsx/

JQUERY

$(document).on("scroll",function(){
  $("#menu").css("visible","none");
  $("#menu").css("position","fixed");
  pos = Math.ceil($("#menu").offset().top);
  pos2 = Math.ceil($("#text2").offset().top);
  if(pos>pos2){
    $("#menu").css("position","relative");
  }
  else{
    $("#menu").css("position","fixed");
  }
  $("#menu").show();
});

CSS

#menu{
  float:left;
  width:50%;
  position:fixed;
  height:20px;
}
.text{
 float:left;
 width:50%;
 margin-left:50%;
}

HTML 见https://jsfiddle.net/3w1pvhsx/

如何使元素仅针对页面的一部分进行定位

1 个答案: