盡管向下滾動滾動條，如何使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保持在頁面左側。

這會回答您的問題並解決您的問題嗎？ 如果沒有讓我知道！