jQuery判断div随滚动条滚动到一定位置后停止

 这篇文章主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下

实现代码:
 
代码如下:
<script type="text/javascript">
var rollSet = $('#widget');
    var offset = rollSet.offset();
    var fwidth = $("#footer").height();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
        if (offset.top < scrollTop) {
            if (scrollBtm > fwidth) {
                rollSet.removeClass('absolute').addClass('fixed')
            } else {
                rollSet.removeClass('fixed').addClass('absolute')
            }
        } else {
            rollSet.removeClass('fixed')
        }
    })
</script>
 
方法说明:
由页面总高度减去已滚动的高度再减去ID为widget的层的高度即等于该层底部距离底部的高度;
当距离底部的高度小于或等于特定位置距离底部的高度时,去掉样式fixed,然后给该层添加绝对定位!
CSS中要给父父层添加position:relative;
 

时间: 2024-08-31 06:49:15

jQuery判断div随滚动条滚动到一定位置后停止的相关文章

jQuery判断div随滚动条滚动到一定位置后停止_jquery

实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget');    var offset = rollSet.offset();    var fwidth = $("#footer").height();    $(window).scroll(function() {        var scrollTop = $(window).scrollTop();  

jQuery实现将div中滚动条滚动到指定位置的方法_jquery

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位_jquery

这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. 复制代码 代码如下: var container = $('div'), scrollTo = $('#row_8'); container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop() ); // Or you can animate the scrolling: container.animate({

基于jquery的DIV随滚动条滚动而滚动的代码_jquery

核心代码: 复制代码 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(

js-JS判断div的滚动条是否到底部

问题描述 JS判断div的滚动条是否到底部 jsp文件中body里有一个div,这个div和body的高度不一样,我用js动态的向div中添加内容,每次添加内容是会判断 如果这个div中的滚动条在底部,添加内容成功后,滚动条会滚动到底部,如果滚动条不在底部,添加内容成功后,滚动条的位置不变. if(document.getElementById('resShow').scrollTop + document.getElementById('resShow').Height() == docume

DIV随滚动条滚动而滚动的实现代码【推荐】_jquery

记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定! <script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(window).s

使用jQuery判断Div是否在可视区域的方法 判断div是否可见_jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-

js将滚动条滚动到指定位置的简单实现方法_javascript技巧

js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

js/jq滚动到一定位置后固定显示

js滚动到一定位置后固定显示  代码如下 复制代码 <script type="text/javascript"> function htmlScroll() {  var top = document.body.scrollTop ||  document.documentElement.scrollTop;  if(elFix.data_top < top)  {   elFix.style.position = 'fixed';   elFix.style.to