关闭
首页>JavaScript>正文

网页滚动让边栏固定效果

JavaScript 2016-12-07 21:56:31
  • A+
  • 6
  • 2154
细心的宝宝应该发现我们博客的边栏在页面滚动的时候会固定,这是怎么实现的呢?
其实很简单,大致的原理就是先计算该div在浏览器中的高度,然后根据滚动条的高度来进行计算,如果到一定高度就把div fixed. 这样就实现了.

QQ图片20161207215602.png

具体的js代码如下:
(为什么我取消了根据底部判断呢? 因为图片用了懒加载,因此造成了判断到底部的高度不准确,所以只能不用了.)


  
//滑动固定侧边栏
 
  $(function() {
        if (screen.width > 750) {
            var classname = $('.friend-message');
            var top = classname.offset().top - parseFloat(classname.css('marginTop').replace(/auto/, 0));
            var footTop = $('.site-footer').offset().top - parseFloat($('.site-footer').css('marginTop').replace(/auto/, 0));
            var maxY = footTop - classname.outerHeight();
            var maxW = classname.outerWidth();

            $(window).scroll(function(evt) {
                var y = $(this).scrollTop();
                if (y > top) {
                    classname.css({
                        position: 'fixed',
                        top: '65px',
                        background: '#f7f7f7',
                        width: maxW
                    });
                    /*
              if (y < maxY) { //计算是否到最底部
                   classname.css({position: 'fixed',top:'65px',background: '#f7f7f7',width: maxW});
              } else {
                   classname.css({position: 'relative',top: '0'});
              }*/
                } else {
                    classname.css({
                        position: 'relative',
                        top: '0'
                    });
                }
            });
        }
    });

本文地址:https://www.awobaba.cn/view-2.html

版权声明:本文为原创文章,版权归 阿我巴巴 所有,欢迎分享本文,转载请保留出处!

分享

广告位

评论6 发表评论

  • Army2016-12-08 12:00:36

    Windows 10󰀹重庆市电信

    bearjun这是bug啊,我是Jianrry,这是我同学的账号。
    @bearjun 怎么可能会有两条, 什么浏览器?怎么提交的, 前端后端我都做了逻辑判断,没理由.
    回复
  • bearjun2016-12-08 10:22:14

    Windows 7󰀹湖北省武汉市电信

    Army怎么重复两条? 刚把移动端适配好,手机浏览不费劲了.
    @Army 这是bug啊,我是Jianrry,这是我同学的账号。
    回复
  • Army2016-12-08 01:52:15

    Windows 10󰀹重庆市电信

    Jianrry早点睡,晚安。我也要睡了。另外,建议添加点击图片放大效果。
    @Jianrry 怎么重复两条?  刚把移动端适配好,手机浏览不费劲了.
    回复
  • Jianrry2016-12-08 01:25:49

    Windows 10󰀹湖北省武汉市电信

    Army因为正在适配移动端,所以用了if (screen.width > 750) ,低于该宽度将不实现固定.
    @Army 早点睡,晚安。我也要睡了。另外,建议添加点击图片放大效果。
    回复
  • Jianrry2016-12-08 01:25:49

    Windows 10󰀹湖北省武汉市电信

    Army因为正在适配移动端,所以用了if (screen.width > 750) ,低于该宽度将不实现固定.
    @Army 早点睡,晚安。我也要睡了。另外,建议添加点击图片放大效果。
    回复
  • Army2016-12-07 21:58:28

    Windows 10󰀹重庆市电信

    因为正在适配移动端,所以用了if (screen.width > 750) ,低于该宽度将不实现固定.
    回复
点击获取效验码

Copyright © 阿我巴巴 版权所有.

Process:0.00987s, Memory: 477.55K, Cache: redis. 渝ICP备16003772号

渝公网安备 50022802000338号

本站服务器由 腾讯云 提供