导航栏根据页面滚动自动定位效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>导航栏自动定位效果</title>
<style>
html, body, div, ul, li {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}
#sidebar {
    width: 50px;
    height: 500px;
    position: fixed;
    left: 50%;
    top: 200px;
    margin-left: calc(-30% - 60px);
}
#sidebar ul li {
    width: 50px;
    height: 50px;
    background: skyblue;
    border: 1px dashed #eee;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
#sidebar ul li.cur {
    background: orange;
    color: #37c1e3;
    font-weight: bold;
}
.item {
    width: 60%;
    height: 800px;
    background: #cccccc;
    margin: 0 auto;
    font-size: 50px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #37c1e3;
}
</style>
<script src="https://cdn.timecdn.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
    function SideBar(opt) {
        var self = this;
        this.opt = {
            sidebar: '',
            items: ''
        };
        this.opt = opt;
        this.click_F = false;
        this.proboxTop = [];
        this.opt.sidebar.find('li').eq(0).addClass('cur');
        $.each(self.opt.items, function(index) {
            self.proboxTop[index] = self.opt.items.eq(index).offset().top;
        });
        this.init();
    }
    SideBar.prototype = {
        init: function() {
            this.clickTo();
            this.scrollTo();
        },
        clickTo: function() {
            var self = this;
            this.opt.sidebar.find('li').click(function() {
                self.click_F = true;
                var index = $(this).index();
                $('html,body').finish().animate({
                    scrollTop: self.proboxTop[index]
                }, function() {
                    self.click_F = false;
                });
                $(this).addClass('cur').siblings().removeClass('cur');
            });
        },
        scrollTo: function() {
            var self = this;
            this.change($(window).scrollTop());
            $(window).on('scroll', function() {
                if (self.click_F) {
                    return;
                }
                self.change($(this).scrollTop());
            });
        },
        change: function(scrollTop) {
            var self = this;
            var el = self.opt.sidebar;
            for (var index = 0; index < self.proboxTop.length - 1; index++) {
                if (self.proboxTop[index] <= scrollTop && self.proboxTop[index + 1] > scrollTop) {
                    el.find('li').eq(index).addClass('cur').siblings().removeClass('cur');
                }
            }
            if (self.proboxTop[self.proboxTop.length - 1] <= scrollTop) {
                el.find('li').eq(self.proboxTop.length - 1).addClass('cur').siblings().removeClass('cur');
            }
        }
    }
    var scroll = new SideBar({
        sidebar: $('#sidebar'),
        items: $('.item')
    });
});    
</script>
</head>
<body>
    <div id="sidebar">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ul>
    </div>
    <div class="content">
        <div style="background:pink" class="item">one</div>
        <div style="background:deepskyblue" class="item">two</div>
        <div style="background:greenyellow" class="item">three</div>
        <div style="background:green" class="item">four</div>
        <div style="background:orange" class="item">five</div>
    </div>
    <div style="height:500px;"></div>
</body>
</html>
Last modification:June 27th, 2020 at 04:15 pm
如果觉得我的文章对你有用,请随意赞赏