搜索

+

95

-

js如何实现页面往下滚动，导航条悬停在顶部效果？

html5 javascript css

请问js如何实现页面往下滚动，导航条悬停在顶部效果？

网友回复

+

15

-

可以用jquery实现，代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //标示动画是否执行
            var isAnimated = false;

            $(document).ready(function() {

                //on() 添加监听  "所要监听的事件" function(){}当监听到事件后执行的方法
                $(window).on("scroll", function() {
                    //this代表window scrollTop()向上滑动的距离
                    if ($(this).scrollTop() > 190) {
                        $(".nav").addClass("fixed");
                        //如果动画执行过
                        if (!isAnimated) {
                            $(".nav").css("top", "-40px"); //每次要执行动画之前都将top值设为-40px
                            $(".nav").animate({
                                "top": "0px"
                            }, 1000);
                            isAnimated = true;
                        }
                    } else {
                        isAnimated = false;
                        $(".nav").removeClass("fixed");
                    }
                })

            });

        });
    </script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background: white;
        }
        /*固定定位*/
        .fixed {
            position: fixed;
            top: -40px;
            z-index: 99;
        }
        .nav {
            padding: 10px;
            backg...

点击查看剩余70%

我知道答案，我要回答

我有问题

私活外包

最新提问