为什么 jquery isVisible 不能与滚动功能一起使用

debugcn 发表于 Dev

姆鲁格什·塔克

我的代码如下所示；

    $(document).ready(function() {

    var scroll_start = 0;
    var startchange = $('.q-intro-text');
    var offset = startchange.offset();
    $(document).scroll(function() {
        scroll_start = $(this).scrollTop();
        if (scroll_start > offset.top) {
            $('#q-nav').css('background-color', 'black');
        } else {
            $('#q-nav').css('background-color', 'transparent');
        }
    });



    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        $(document).off("scroll");
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 2
        }, 500, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
            var scroll_start = 0;
            var startchange = $('.q-intro-text');
            var offset = startchange.offset();
            $(document).scroll(function() {
                scroll_start = $(this).scrollTop();
                if (scroll_start > offset.top) {
                    $('#q-nav').css('background-color', 'black');
                } else {
                    $('#q-nav').css('background-color', 'transparent');
                }
            });
        });
    });
});

function onScroll(event) {
    var scrollPos = $(document).scrollTop();
    $('#q-nav a').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#q-nav ul li a').removeClass("active");
            currLink.addClass("active");
            // $('#q-nav').css('background-color', 'red');

        } else {
            currLink.removeClass("active");
            // $('#q-nav').css('background-color', 'transperant');

        }
    });
}

#q-nav {
     width: 100%;
     height: 8rem;
     position: fixed;
     top: 0;
     padding-top: 3rem;
 }
 
 #q-nav ul {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
 }
 
 #q-nav .q-nav-about {
     position: relative;
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
     padding: 0rem 2rem 0 2rem;
 }
 
 #q-nav ul li {
     list-style: none;
 }
 
 #q-nav .q-nav-work {
     position: relative;
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
     padding: 0rem 2rem 0 2rem;
 }
 
 #q-nav .q-nav-contact {
     position: relative;
     font-weight: bold;
     color: #ffffff;
     text-decoration: none;
     padding: 0rem 8rem 0 2rem;
 }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="../test/css/index.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div id="q-nav">
        <ul>
            <li><a class="active q-nav-about " id="is-visible" href="#about-us">ABOUT US</a>
            </li>
            <li><a class="q-nav-work" href="#work">WORK</a>
            </li>
            <li><a class="q-nav-contact" href="#contact-us">CONTACT US</a>
            </li>
            </li>
        </ul>

    </div>
</body>

为此，我遵循这个例子。现在一切正常。但我想要做的是当用户向下滚动时，导航菜单的颜色应该改变，这正在发生。当用户自动滚动回第一页时，导航菜单应该变得透明。为此，我正在使用 isVisible 函数，但不知何故它无法检测到活动何时可见？那么有没有其他方法可以让我知道这一点？

阿亚图拉·拉赫曼尼

这是工作示例-

$(document).ready(function () {
 $(".menu").addClass("changeBg");
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        var id = $("#menu-center a:first").attr('href');
        if(target == id){
         $(".menu").addClass("changeBg");
         }
         else{
         $(".menu").removeClass("changeBg");
         }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
if ($('#menu-center a:first').hasClass('active')) {
     $(".menu").addClass("changeBg");
}
else{
$(".menu").removeClass("changeBg");
}
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        var id = $("#menu-center a:first").attr('href');
      
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        
        else{
            currLink.removeClass("active");
        }
    });
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color:#000;
    position: fixed;
    background-color:#000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}
.changeBg{background:rgba(0, 0, 0, 0.22);}
.changeBg a{color:#000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。