javascript - 尽管向下移动滚动条，如何保持 div 的内容始终可见

Question

我正在尝试将左侧导航复制到 http://www.kahuna-webstudio.fr/ 。如果你看一下http://www.kahuna-webstudio.fr/ ，然后向下滚动大约 50 像素左右，您将看到屏幕左侧出现一个 div，其中有一些导航。感谢 stackoverflow 中一些人的帮助，我已经完成了大部分工作。但我没有工作的一部分是，当您向下滚动时，我的 div 内容(图像)不会保持静止(或始终可见)。

所以我想要发生的是:当 div 出现在屏幕左侧时，当用户向下滚动时，我希望 div 的内容始终出现在 View 中。

现在我要做的工作是:通过 animate() 我将左侧导航 div 的高度设置为文档高度，宽度增长到 80 像素，然后一些图像 fadeIn( )。但是页面相当长，当用户向下滚动时，他们也可以向下滚动我的左侧导航 div 的高度；我总是希望左侧导航的内容始终出现在用户的 View 中。

我认为这个人发布了一个类似的问题( Keeping a header always in view )，但我发现很难将 if 附加到我的示例代码中。有人可以帮忙吗？我非常感激。

这是我的代码:

$(window).scroll(function(){
  var wintop = $(window).scrollTop();
  var docheight = $(document).height();
  var winheight = $(window).height();

  var newwidthgrow = 80;
  var smallheight = 0;
  var smallwidth = 0;


  if((wintop > 296)) {
    $("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
      $("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow',function(){
        $("#slidebottomContents").fadeIn();
      });

    });
  }

  if((wintop < 25))
  { 
    $("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){

      $("#slidebottomContents").fadeOut(function(){
        $("#slidebottom").stop().animate({width:smallwidth + "px"});                                       
      });

    });

   }


});

Answer 1

就我而言，这只能通过 css 来覆盖。 要将 div 保持在同一位置，您可以应用以下 css:

CSS:

div id {
position: fixed;
left: 0px
width: 'your width'
}

位置固定将 div 卡住在您想要的位置。 left 将 div 保持在页面的左侧。

这是否回答了您的问题并解决了您的问题？ 如果没有请告诉我!