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.top = 0;
  elFix.style.left = elFix.data_left;
 }
 else
 {
  elFix.style.position = 'static';
 }
}

function htmlPosition(obj)
{
 var o = obj;
 var t = o.offsetTop;
 var l = o.offsetLeft;
 while(o = o.offsetParent)
 {
  t += o.offsetTop;
  l += o.offsetLeft;
 }
 obj.data_top = t;
 obj.data_left = l;
}

var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function(){
 var newHtmlWidth = document.documentElement.offsetWidth;
 if(oldHtmlWidth == newHtmlWidth)
 {
  return;
 }
 oldHtmlWidth = newHtmlWidth;
 elFix.style.position = 'static';
 htmlPosition(elFix);
 htmlScroll();
}
window.onscroll = htmlScroll;

var elFix = document.getElementById('fixedRight');
htmlPosition(elFix);

</script>

jQuery 当元素滚动到顶部后固定位置

 代码如下 复制代码

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
    var elm = $('#pordAttr');
    var startPos = $(elm).offset().top;
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(elm).css('position',((p) > startPos) ? 'fixed' : 'static');
        $(elm).css('top',((p) > startPos) ? '0px' : '');
    });
});
</script>

 

页面滚动时固定侧边栏效果

需要按各自的需求修改相应代码,完整的JavaScript代码如下:

 代码如下 复制代码

//固定tag cloud
jQuery(function () {
    //指定的高度,侧边栏距顶部距离+侧边栏高度+可视页面的高度
    var sideTop=jQuery("#sidebar").offset().top+jQuery("#sidebar").height()+jQuery(window).height();
    var scTop = function() {
    if( typeof window.pageYOffset != 'undefined') {
        return window.pageYOffset;
    } else if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        return document.documentElement.scrollTop
    } else if( typeof document.body != 'undefined') {
        return document.body.scrollTop;
    }
}

jQuery(window).scroll(function() {
        if (scTop() > sideTop) {
        if(jQuery("#fixed-siderbar").length == 0){
            //下面是要显示的模块,复制侧边栏中的标签云内容,追加到侧边栏的底部
            var tag = jQuery("#tag_cloud-2 .widget-wrap").clone().html();
            var html="<div id='fixed-siderbar'><div id='fixed-wrap'><div id='fixedTag' class='widget  widget_tag_cloud' >"+ tag +"</div></div></div>"
            jQuery("#sidebar").append(html);
        }else{
            jQuery("#fixed-siderbar").show();
        }
    }else{
        jQuery("#fixed-siderbar").hide();
    };
  });
});

最后附上我的CSS,同样按需修改

 代码如下 复制代码
#fixed-siderbar{
    z-index: 0;
    position:fixed;
    top:70px;
}

效果如下

时间: 2024-09-14 13:57:51

js/jq滚动到一定位置后固定显示的相关文章

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

 这篇文章主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下 实现代码:   代码如下: <script type="text/javascript"> var rollSet = $('#widget');     var offset = rollSet.offset();     var fwidth = $("#footer").height();     $(window).scroll(function(

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();  

JS 图片滚动效果做出来后点击图片的链接怎么弄

问题描述 我直接改varlinks=""不行啊怎么改 解决方案 解决方案二:你下载这个例子,修改一下图片和里面对应的链接即可.解决方案三:但那个链接怎么弄呢我的是在ASP.NET的基础上的解决方案四:你用flash做的,这个我帮不了你了,个人建议你去17素材网找一个纯css或者html实例的图片轮播的model,这里的model可以在图片外套a标签什么的,就方便加链接了.你这种滚动效果是人家自动给你生成的代码,不好改解决方案五:varlinks=""是不是页面的路径

ASP.Net刷新页面后自动滚动到原来位置方法汇总

本文给大家汇总了3种ASP.Net实现的刷新页面后自动滚动到原来位置方法,十分的简单实用,有需要的小伙伴可以参考下.     在网上搜索之后总结了三种方式: 1.设置Page中的MaintainScrollPositionOnPostback属性为true A>.页面里有MaintainScrollPositionOnPostback,默认是false,设为true即可(页面级)   代码如下: <%@ Page Language="C#" AutoEventWireup=

itext pdf 分页-itext生成PDF,PdfPTable固定位置后无法分页

问题描述 itext生成PDF,PdfPTable固定位置后无法分页 我要往pdf中插入一个表格,创建了一个PdfPTable,又使用table.writeSelectedRows(0, -1, x, y, canvas)把表格固定到了PDF上的某个位置,现在问题来了,表格数据多了以后并没有自动分页,而是变成了下面这样,请问是什么原因?怎么才能使表格自动分页?我这里使用了table.writeSelectedRows(),就不能再使用document.add(table)了. 解决方案 已解决,

panel-用API.SetWindowPos方法设置固定位置后,将第三方的应用程序嵌入到Panel控件中。

问题描述 用API.SetWindowPos方法设置固定位置后,将第三方的应用程序嵌入到Panel控件中. 在C# Winfrom项目中,有一个form窗体,一个panel控件. 通过Process.start方法打开第三方的应用程序,将第三方程序嵌入Panel控件中. 用API.SetWindowPos方法改变第三方的应用程序位置以及大小. 目前发现一个问题, 打开第三方的应用程序设置大小及位置,通过获取panel控件的位置可以显示嵌入到Panel控件中,代码如下: API.SetWindow

java-如何在JAVA中,在一个位置长度字符串中,取某固定字符后固定位数的字符?

问题描述 解决方案 先用string.split("固定字符"):分割出来固定字符后的字符串 再用 string.substring("开始位置","结束位置")截取固定位数 解决方案二: 正则表达式,比如 tdose:(0.d+) 解决方案三: 首先获取固定字符第一次出现的位置,然后再截取该位置到该位置+固定位置的字符串 1.int a = s1.indexOf("固定字符"): 2. s1.substring(a,a+固定

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"&

ASP.Net刷新页面后自动滚动到原来位置方法汇总_实用技巧

在网上搜索之后总结了三种方式: 1.设置Page中的MaintainScrollPositionOnPostback属性为true A>.页面里有MaintainScrollPositionOnPostback,默认是false,设为true即可(页面级) 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"  Mai