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.

我的问题是：如何使该页面保持这个链接？

PS。对不起我的英语不好。我来自波兰，我仍然没有使用Eng：p

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";
       }

    });
});

隐藏图片后改变滚动位置 - jQuery

2 个答案: