2

我知道scrollerama和superscrollerama。

我和他们两个都挣扎了几天。而且我不能让它们仅用于固定。我不需要动画和类型支持。我尝试使用示例文档并一次删除一个块元素的 HTML 内容，然后分页符。似乎 scrollerama 仅在存在整个示例时才有效。或者更有可能......我不够聪明，无法弄清楚。

我要做的就是固定一个<h1></h1>标签，然后在到达特定标签时取消固定它。

我在这里也看到了这个问题：CSS Trouble with Pinned Header Div但这似乎根本不起作用。

示例代码：

    <!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    </style>
    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<article>
    <header></header>
    <section id="wrap">

        <h1> Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>

        <h1> Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>

        <h1>Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>
    </section>
    <footer></footer>
</article>
</body>
</html>

某个地方的一些 jquery 函数示例的链接将非常有帮助。或者快速解释如何将 scrollerama 剥离为仅 pin/upin 功能会有所帮助。

额外的：

sbeliv01 提出了这个问题：How to find the most recent element to the current position with jQuery

但是，当调整边距时该方法会失败（为 HTML5 重置）。它仅在元素上绝对没有边距调整时才有效。当试图简单地将 H1 标签包装在无样式的 div 中时，页面滚动时会出现可怕的闪烁。

这是非功能性的，但我已经设置了一个
jsFiddle 以根据需要使用：
FIDDLE HERE
正如您所看到的那样，事情固定得很好，但后来他们无法取消固定。

4

2 回答 2

2

在使用它并使用 Phillip Wills 的建议之后，我已经将代码安顿到它似乎运行得更好的地方。

我之前使用的 if/else 语句没有问题。似乎问题仅在于在 jquery 中使用什么位置。

功能性的jQuery：

  $(function(){
    $(window).bind('scroll', function() {
        $('.info').each(function() {
          var pin = $(this);
          var inner = pin.next().position().top - $(window).scrollTop();
          var ptop = pin.height() + 20;

            if (inner < ptop) {
                pin.addClass('pinned');
            } else {
                pin.removeClass('pinned');
            }
        });        
    });
});

主要问题是找到下一个对象的顶部，Phillip 帮助解决了这个问题，然后找到了固定对象的顶部，并为滚动提供了一些额外的空间。

Functional jsFiddle demo here

于 2013-03-29T01:09:20.740 回答
1

您可能需要调整一些值，但是使用第二个 if 语句而不是使用 else，似乎可以解决问题...这是您的匿名函数中的一些更新代码：

var bottom = pin.next().position().top + pin.next().height() - $(window).scrollTop();
var inner = pin.next().position().top - $(window).scrollTop();
console.log(position, bottom, inner);

if (position <= 0 && bottom >= 50 && inner <= 15) {
   pin.addClass('pin');
} 
if (bottom <= 30 || inner >= 15) {
   pin.removeClass('pin');
}

这是更新小提琴的链接：http: //jsfiddle.net/ffdFd/3/

于 2013-03-28T21:58:32.000 回答