首页 > 前端
JQ网站滚动到一定距离导航固定
来源:TP课堂 时间:2021-11-07 点击:321

场景:屏幕滚动,右侧板块固定效果。


$(function () {
            var body_width = document.body.clientWidth;//总宽度
            w = (body_width - 1200) / 2;//right距离
            var foot = $("footer").offset().top;

            console.log(foot);
            console.log('<br>');

            $(window).scroll(function () {
               

                if ($(window).scrollTop() >= 200) { //向下滚动像素大于这个值时,即出现浮窗~

                    $('.article_right').css({ "position": "fixed", "top": "0", "right": w });

                }
                if ($(window).scrollTop() < 200) { //向下滚动像素大于这个值时,即出现浮窗~
                    console.log($(window).scrollTop());

                    $('.article_right').css({ "position": "absolute", "top": "0" ,"right": 0});

                }



                if ($(window).scrollTop() >= foot-450) { //向下滚动像素大于这个值时,即出现浮窗~

                    $('.article_right').css({ "position": "static", "right": w });

                }

            });

        });