Question

这是我的第一个问题。我在滚动时到达页面顶部时想要粘贴的图像有问题。看看这个jfiddle - 它不是我的，但接近代表我的问题

（我知道我可以输入一组“margin-top”来使其工作，但是当浏览器大小发生变化时，图像大小将会响应，并会甩掉设定的边距。）

到目前为止，我已通过使用以下代码在我的HTML中实现Div Id = Picture1来实现这一目标

<div id="picture1"><img src="img/empty-restaurant.png" alt="Why do your customers not come back?" style="max-width:100%;height:auto;"> </div>

当这张照片“粘住”时，图像下方会跳起来，我通过包含.js的最后一行来修复此问题，但是通过说明一个固定的“margin-top”，这意味着如果是边距大小不正确，具体取决于浏览器大小。

有没有办法让这个Margin变量或相对于“stick”项目的高度？如果是这样的话？

谢谢你们！

$(document).ready(function() {
    var s = $("#picture1");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }

这是需要更改的部分 - 第一个“margin-top”需要相对于“stick”项目的大小

if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", 60);     } else { s.removeClass("stick"); $("body").css("margin-top", 0); }

    });
});

Answer 1

作为评论，

$("body").css("margin-top", s.height());

根据margin-top期间<body> <{1}}元素（#picture1）的高度，为fixed提供动态window.scroll css值

另外，你提到屏幕调整大小（rwd）

时高度可能会改变

所以这也可以添加（以便检查）

$(window).resize(function() {
  var s = $("#picture1");
  if(s.hasClass("stick") {
    $("body").css("margin-top", s.height());
  }
});

如何使.fixed粘性项目的“margin-top”相对于粘性项目的大小？

1 个答案: