Question

我和他们一起挣扎了几天。而且我无法让它们仅用于钉扎。我不需要动画和输入支持。我尝试使用示例文档并一次剥离HTML内容一个块元素和分页符。似乎scrolllerama仅在整个示例存在时才有效。或者更可能......我不够聪明，无法弄明白。

我想做的就是固定<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函数示例的链接会非常有用。或者快速解释如何将scrolllerama向下拉到pin / upin函数会有所帮助。

附加：

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

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

这是无功能的，但我已经设置了一个 js根据需要进行游戏：
FIDDLE HERE
你可以看到东西很好，但是他们没有解开。

Answer 1

稍微使用它并使用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

Answer 2

您可能需要调整一些值，但是制作第二个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/

是否有一个简单的jQuery函数来固定和取消固定h1标签？

附加：

2 个答案: