隱藏圖片後更改滾動位置 - jQuery

Question

我的代碼有問題。我的網頁由一些部分組成。在一個部分有一些寬度爲90％的完整高清jpgs。所以我不知道他們在不同屏幕上的高度。點擊鏈接後，您可以看到這些圖像，並且可以在再次單擊鏈接後隱藏它們。但有一個問題：當你隱藏它們時，頁面位於另一部分，因爲圖片佔用了屏幕高度的100％以上。它是這樣的：

var cos = "2"; 
$(".section").on("click", ".photo", function() { 
    if (cos == "2") { 
     $(".pics").fadeIn(); 
     cos = "1";  
    } 
    else { 
      $(".pics").hide(); 
    cos = "2"; 
    } 

}); 

Fiddle here.

我的問題是：如何在這個環節的pisition該頁面停留？

PS。對不起我的英語不好。我是波蘭人，我仍然不親在使用英：對

Answer 1

地方

<div class="photo">click me</div> 

前

<div class="pics"></div> 

Answer 2

試試這個

Live Demo

添加id="stick"爲<div id="stick" class="section" style="background-color: yellow;">

CSS

.fixed { 
    position:fixed; 
    top:10px; 
    left:10px; 
    z-index:10; 
} 

jQuery的

$(document).ready(function() { 
    var s = $("#stick"); 
    var s1 = $(".photo"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     var sheight = pos.top+s.height(); 
     if ((windowpos >= pos.top) && (windowpos <= sheight)) { 
      s1.addClass("fixed"); 
     } else { 
      s1.removeClass("fixed"); 
     } 
    }); 

    $(".pics").hide(); 
    var cos = "2"; 
    $(".section").on("click", ".photo", function() { 
     if (cos == "2") { 
      $(".pics").fadeIn(); 
      cos = "1";  
     } 
     else { 
       $(".pics").hide(); 
     cos = "2"; 
     } 

    }); 
});