尽管向下滚动滚动条，如何使div的内容始终可见

Question

我正在尝试在http://www.kahuna-webstudio.fr/复制左侧导航栏。 如果您看一下http://www.kahuna-webstudio.fr/ ，并向下滚动约50像素，您会看到在屏幕左侧显示一个div，其中包含一些导航。 在stackoverflow上一些人的帮助下，我的大部分工作都可以进行。 但是我没有工作的一部分是，当您向下滚动时，div的内容（图像）不会保持固定不变（或始终可见）。

所以我想发生的事情是：当div出现在屏幕左侧时，当用户向下滚动时，我希望div的内容始终显示在视图中。

现在，我正在工作的是：通过animate（）将左导航div的高度设置为文档高度，并且宽度增长到80像素，然后添加一些图像fadeIn（）。 但是页面相当长，当用户向下滚动时，他们还可以向下滚动我的左侧导航div的高度； 并且我一直希望左侧导航的内容始终显示在用户的视野中。

我认为这个人发布了一个类似的问题（ 始终在标题中显示标题 ），但是我发现很难附加到示例代码中。 有人可以帮忙吗？ 我非常感激。

这是我的代码：

$(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保持在页面左侧。

这会回答您的问题并解决您的问题吗？ 如果没有让我知道！