手工写的一段滚动条监听事件

ゞ浴缸里的玫瑰 2022-08-21 09:44 201阅读 0赞

$(document).ready(function(){
        var flag =0;//设置参数
        $('.g-submit li').on('click',function(){
            flag = 1;//点击是改变参数的值
            $(this).addClass('g-nav-active').siblings().removeClass('g-nav-active');
            var _this = $(this).index();
            var _gScrTop = $(eval('g_scroll'+_this)).offset().top +'px';
            /*var _ngScrTop = parseInt(_gScrTop);*/
            $("html,body").animate({
      scrollTop: _gScrTop},500,function(){
                flag = 0;//function回调函数改回参数值
            });
        })
        $(window).on('scroll',function(){
            var _gNavHeight = $('.g-banner').height()+110;
            var _documentScroll = $(document).scrollTop();
            var $gNav = $('.g-nav');
            var _gheight = $('.g-nav').height();
            if(_documentScroll >= _gNavHeight){
                $gNav.css({
      'position':'fixed','top':'0'})
            }
            if(_documentScroll < _gNavHeight){
                $gNav.css({
      'position':'absolute','top':'470px'})
            }
            if(flag == 0){//判断参数值
                $('.g-submit li').each(function(){//循环li的length
                    var _this = ($(this).index());//存储每个li的索引值
                    var _gScrollTop = $(eval('g_scroll'+_this)).offset().top-_gheight;
                    if(_documentScroll >= _gScrollTop){
                        $('.g-submit li').eq(_this).addClass('g-nav-active').siblings().removeClass('g-nav-active');
                    }
                });
            }
        })
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 监听滚动条是否滚动到底部

【代码】js 监听滚动条是否滚动到底部。

喜欢ヅ旅行/ 2024年04月22日 15:07/ 0 赞/ 87 阅读

相关 JS 监听滚动条事件

JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果 > 获取滚动条位置代码 / 获取滚动条位置 /

朱雀/ 2023年10月04日 18:37/ 0 赞/ 187 阅读

相关 uni-app 监听滚动条停止的事件

let timer; onPageScroll:function(object){ clearTimeout(timer) // 每次滚动前

矫情吗；*/ 2023年03月03日 05:53/ 0 赞/ 17 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 259 阅读

相关写一个方法监听滚动条到底部要触发的事件

项目开发中有很多是滚动条触底，才会触发的操作。实现一个公共的方法监听，把需要的函数作为参数传进去，如果需要还可以附带该函数的参数。下面是代码： //监听w

素颜马尾好姑娘i/ 2022年10月29日 05:16/ 0 赞/ 168 阅读

相关手工写的一段滚动条监听事件

$(document).ready(function(){ var flag =0;//设置参数 $('.g-submit li').o

ゞ浴缸里的玫瑰/ 2022年08月21日 09:44/ 0 赞/ 202 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 656 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 531 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 714 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 540 阅读