Fatal编程技术网
  • jquery/
  • 是否有一个简单的jQuery函数来固定和取消固定h1标记？

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

jquery

是否有一个简单的jQuery函数来固定和取消固定h1标记？,jquery,q,Jquery,Q,我知道，而且 我和他们两个都挣扎了几天。我不能让它们只为固定而工作。我不需要动画和类型支持。我尝试使用示例文档，一次剥离一个块元素的HTML内容，页面就会中断。似乎scrollerama只在整个示例出现时才起作用。或者更有可能。。。。我没有足够的智慧去理解它 我所要做的就是固定一个标记，然后在到达特定标记时取消固定 我在这里也看到了这个问题：但这似乎根本不起作用 示例代码： <!DOCTYPE html> <html> <head> <t

我知道，而且

我和他们两个都挣扎了几天。我不能让它们只为固定而工作。我不需要动画和类型支持。我尝试使用示例文档，一次剥离一个块元素的HTML内容，页面就会中断。似乎scrollerama只在整个示例出现时才起作用。或者更有可能。。。。我没有足够的智慧去理解它

我所要做的就是固定一个
标记，然后在到达特定标记时取消固定

我在这里也看到了这个问题：但这似乎根本不起作用

示例代码：

    <!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>


无标题


然而，当边距被调整（HTML5重置）时，该方法失败。只有当元素上绝对没有边际调整时，它才起作用。当试图简单地将H1标签包装在一个未设置样式的div中时，页面滚动时会出现可怕的闪烁

这是非功能性的，但我已设置了一个

根据需要使用的JSFIDLE:




正如你所看到的那样，pin很好，但是它们无法解锁。
你可能需要调整一些值，但是使用第二个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');
}



var bottom=pin.next（）.position（）.top+pin.next（）.height（）-$（window.scrollTop（）；
var inner=pin.next（）.position（）.top-$（window.scrollTop（）；
控制台日志（位置、底部、内部）；

如果（position=50&&internal在使用它一点并使用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');
            }
        });        
    });
});



$（函数（）{
$（窗口）.bind（'scroll'，function（）{
$（'.info'）。每个（函数（）{
var pin=$（此）；
var inner=pin.next（）.position（）.top-$（window.scrollTop（）；
var ptop=引脚高度（）+20；
if（内

主要的问题是找到下一个对象的顶部，Phillip帮了忙，然后找到固定对象的顶部，为滚动留出一点额外的空间


也许这会有帮助？@sbeliv01是的，很有帮助。谢谢。基于这个问题……问题是，如果对元素应用了边距并将元素包装在一个没有样式的div中，任何removeClass jquery都会失败，在滚动时会导致可怕的闪烁。你在@radarbob no上发布过这个吗？这不是真正的“应用程序”问题。这只是一个jquery问题。谢谢，你的小提琴链接似乎断了。但是经过一些调整，我已经让它变得更加平滑和有效：我感谢额外的眼睛。再次感谢。赏金奖励有延迟。是的，如果/否则切换很好。问题是滚动的目标。而你的回答对目标有很大帮助尽管如此，由于所有硬编码的数字，除了需要手动更改以用于任何附加用途之外，它仍然不太正确。这种新结构更加流畅，可以在不更改的情况下轻松重复。但是，正如您在中所看到的，解钉不起作用。另请参见我的解决方案@Enzino，它是克隆，而不是钉扎。以及解钉在我上面的提琴中工作。Grants，它在下一个pin元素取消固定，但它仍然取消固定。我意识到pin基本上是堆叠的，但由于固定的性质，这很好。