如何根据粘性物品的尺寸制作固定粘性物品的“边缘顶部”？

这是我的第一个问题。我在滚动后到达页面顶部时想要粘贴的图像遇到问题。看看这个jfiddle - 这不是我的，但接近代表我的问题如何根据粘性物品的尺寸制作固定粘性物品的“边缘顶部”？

（我知道我可以输入一组“边距”，使这项工作，但是当浏览器大小变化，则图像大小会响应并甩开设置的空白。）

到目前为止，我已经用下面的代码在我的HTML以实现股利编号=图片1实现了这一

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

当这PI cture“sticks”图像下面的测试会跳起来，我通过包含.js的最后一行来解决这个问题，但是通过声明一个固定的“margin-top”，这意味着如果边距大小不正确取决于浏览器的大小。

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

谢谢你们！

$(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” 需要是相对于 “棒” ED项目

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

    }); 
});

来源

2014-02-27 user3358264

请提供一个http://jsfiddle.net/测试版本 – Zagen

这不是我的，但它是最接近它的东西......谢谢Zarich http://jsfiddle.net/vBy5w/ – user3358264

当你说'相对于s的大小'，你是说身高？ –

为注释的大小，

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

根据元素上的高度（#picture1）给出<body>的动态margin-top css值，该元素为fixed期间window.scroll期间的高度

作为补充，你提到的高度可以改变屏幕尺寸重（RWD）

所以这可能是好的也增加（以保持其检查）

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

来源

2014-02-27 00:31:10

如何根据粘性物品的尺寸制作固定粘性物品的“边缘顶部”？

回答

相关问题