点击滚动指定高度 屏幕滚动事件

 $(".fix_nav span").click(function(){ //点击事件触发

            $(this).addClass("cur").siblings().removeClass("cur");
            var Index = $(this).index()+1;

            var top = $("#fix_"+Index).offset().top; //获取某个元素距顶部的距离
           $("body,html").animate({scrollTop:(top-60)+"px"},500);//页面滚动到指定高度
                                    })

  $(window).scroll(function(){//窗口滚动事件触发
    var ws=$(window).scrollTop()//获取当前滚动高度
    if(ws>t){
    $(".fix_nav").addClass("isfix")    

    }else{
    $(".fix_nav").removeClass("isfix")    

        }
        })                                
时间: 2024-10-18 09:27:48

点击滚动指定高度 屏幕滚动事件的相关文章

页面滚动指定高度时添加样式或动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <link rel=&qu

JS-特效 ~ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为10) 最后10像素容易 容易出现问题 所以要向上取整 400-396 = 4  4/10 = 0.4   四舍五入 = 0 400-396 = 4  4/10 = 0.4   四舍五入 = 0 要用定时器 先清除定时器 7.  offsetLest取值为四舍五入 8.  差值大于0的时候向上取整

jquery跟随屏幕滚动代码

我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top;var $archiveOffestTop = $('aside#arch

解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法 解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

scroll滚动到一定距离触发事件/返回顶部animate

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .box{ width: 960px; height: 1800px; bac

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高 document.body.clientHeight 2.有效的高,屏幕可视的高 document.documentElement.clientHeight 3.屏幕的总高度 document.documentElement.scrollHeight 4.滚动的高度 document.documentElement.scrollTop js代码 <script>// 获取有效的宽和高,屏幕可视的宽 高 var winX = document.documentE

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

JQuery 锚点连接屏幕滚动

直接上代码: <!DOCTYPE html> <html class="no-js" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <script src="jqu

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">                </div>        <div class="div1">层1</div