jQuery - 停止固定浮动div当它击中另一个div [英] jQuery - Stop fixed floating div when it hits another div

问题描述

有问题的部分是此链接右侧边栏上的灰色方块。

很好地滚动，但它永不停止。它应该在它击中公告div之前停止。

我知道有一个非常类似的问题和一种答案这里，但它没有被检查，我不能得到它的工作。

我最好在jQuery上是一个新手，所以我非常感谢2年前的风格答案。

触发div滚动的代码是：

  $（function（）{
 
 var msie6 = $ .browser =='msie'& & $ .browser.version< 7; 
 
 if（！msie6）{
 var top = $（'＃comment'）。offset（）。top  -  parseFloat（$（ '#comment'）.css（'margin-top'）。replace（/ auto /，0））; 
 $（window）.scroll（function（event）{
 // y滚动位置是
 var y = $（this）.scrollTop（）; 
 
 //是否低于表单
 if（y> = top）{
 //如果是这样，广告固定类
 $（'＃comment'）。addCla ss（'fixed'）; 
} else {
 // otherwise remove it 
 $（'＃comment'）。removeClass（'fixed'）; 
} 
 var newWidth = $（'＃comment'）。parent（）。width（）; 
 $（'＃comment'）。width（newWidth）; 
 
}）; 
} 
}）; 
  

解决方案

更新回答

由于我们修改了原始代码中的偏移量，因此脚本错失了原始偏移量，因此 y 总是等于 ctop ，因此总是履行（y> = ctop）并且从不触发else块）。这可以通过在函数外部定义 ctop 作为全局变量来解决，这样当我们在滚动时操作＃comment的偏移量时，它的原始偏移值不会丢失。我还为嵌套添加了一个else块，以便在滚动到底部之后将偏移重置为零，然后向后滚动（否则有时会关闭#comment的顶部）。下面的代码应该可以工作。 ）再次，让我知道它是怎么回事，如果您有任何问题：）

  $（document）.ready（function（ ）{
 ctop = $（'＃comment'）。offset（）。top  -  parseFloat（$（'＃comment'）。css（'margin-top'）。replace（/ auto /，0）） ; 
}）; 
 $（window）.scroll（function（event）{
 // scroll的y位置是
 var y = $（this）.scrollTop（）; 
 var abottom = $（'＃announcements'）。offset（）。top  -  parseFloat（$（'＃announcements'）。css（'margin-top'）。replace（/ auto /，0））; 
 
 //是否低于表格
 if（y> = ctop）{
 //如果是，ad固定类
 $（'＃comment'）。addClass （'fixed'）; 
 if（y> abottom  -  $（'＃comment'）。height（））{
 $（'＃comment'）。offset（{'top'：abottom -  $（'＃comment'）。height（） -  y}）; 
} 
 else 
 {
 $（'＃comment'）。offset（{'top' ：0}）; 
} 
} else {
 // otherwise remove it 
 $（'＃comment'）。removeClass（'fixed'）; 
} 
 var newWidth = $（'＃comment'）。parent（）。width（）; 
 $（'＃comment'）。width（newWidth）; 
 
}） ; 
  

---

原始答案

因此，我使用Chrome的JavaScript控制台将绑定更改为$（window）.scroll事件，并且看起来下面的代码应该起作用。它所做的是，当窗口滚动到足以修复注释div时，它还会检查滚动的y位置是否位于公告div应位于底部的位置。如果是，则它通过公告div位置+屏幕大小和当前滚动位置（它将返回负值，导致注释div向上）之间的差异来垂直偏移注释div的位置。这里是我复制粘贴到Chrome浏览器JavaScript控制台（ctrl + shift + j）的代码，并且似乎正在工作：

  $（window）.scroll（function（event）{
 // scroll的y位置是
 var y = $（this）.scrollTop（）; 
 var ctop = $（'＃comment'）。offset（）。top  -  parseFloat（$（'＃comment'）。css（'margin-top'）。replace（/ auto /，0））; 
 var abottom = $（'＃announcements'）。offset（）。top  -  parseFloat（$（'＃announcements'）。css（'margin-top'）。replace（/ auto /，0））; 
 
 //是否低于
的形式如果（y> = ctop）{
 //如果是这样，ad固定类
 $（'＃comment'）。addClass（'fixed '）; 
 if（y> abottom  -  $（'＃comment'）。height（））{
 $（'＃comment'）。offset（{'top'：abottom  -  $（ '#comment'）。height（） -  y}）; 
} 
} else {
 // otherwise remove it 
 $（'＃comment'）。removeClass（'固定'）; 
} 
 var newWidth = $（'＃comment'）。parent（）。width（）; 
 $（'＃comment'）。width（newWidth）; 
 
}）; 
  

一些注释：

注释div的对齐很奇怪至少对我来说），因为div太大，无法滚动页面。这是一个设计问题，而不是一个编码问题。

我将top改为ctop是因为top是window属性，所以您尝试访问<$ c

让我知道这是否适合你：）

Div in question is the gray box on the right sidebar at this link.

Scrolling along nicely, but it never stops. It should stop right before it hits the "announcements" div.

I am aware there is a very similar question and sort of an answer here but it wasn't checked and I couldn't get it to work.

I'm a newbie at best at jQuery, so I humbly appreciate 2-year-old style answers.

The code triggering the div to scroll is:

$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);

    });
  }  
});

解决方案

Updated Answer

Since we were modifying the offset in the original code, the script lost track of what the orginal offset was so that y would always equal ctop, therefore always fulfilling (y>=ctop) and never triggering the else block). This is solved by defining ctop outside the function as a global variable so that it's original offset value isn't lost when we manipulate #comment's offset while scrolling. I also added an else block to the nested if so that the offset is reset to zero after scrolling to the bottom and then scrolling back up (otherwise the top off #comment sometimes gets cut off). The following code should work. Once again, let me know how it goes and if you have any questions :)

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

---

Original Answer

So I played around with your site for a bit using Chrome's javascript console to change the binding to the $(window).scroll event, and it looks like the following code should work. What it does is that when the window is scrolled enough to fix the comments div, it also checks to see if the y position of the scrolling is at a place where the announcements div should be at the bottom. If it is, then it offsets the position of the comments div vertically by the difference between the announcement div position + screen size and the current scroll position (which will return a negative value, causing the comments div to go upward). Here is the code that I copied an pasted into the Chrome javascript console (ctrl+shift+j) and appears to be working:

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var ctop= $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    var abottom = $('#announcements').offset().top - parseFloat($('#announcements').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

A few notes:
The alignment of the comments div is weird (at least for me) because the div is too big to fit on the page without scrolling. This is more a design issue than a coding issue.

I changed top to ctop because top is a property of window, so you try to access top in the console, it returns a part of the window object.

Let me know if this works for you :)

这篇关于jQuery - 停止固定浮动div当它击中另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！