我的 jQuery 无法正常工作

Question

我的网站是https://www.jordanstechworld.com/

当我的“关于标题”的顶部大约在视口的一半处时，我试图让它变成红色。问题是我的文字一直是红色的。我花了几个小时试图找到 SOF 的解决方案，并尝试了多种不同的方法。我将它用于我的 jQuery

$(document).on('scroll', function() {
    if($(this).scrollTop() >= 300){
        $('#about-title').css('color', 'red');
    }
});

这是我的 HTML：

<doctype html>
    <html>
        <head>
            <title>Home - Jordan's Tech World</title>
            <link type="text/css" rel="stylesheet" href="/css/style.css"/>
            <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="https://use.fontawesome.com/affe0d5d11.js"></script>
            <link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet">
            <meta name="theme-color" content="#1F4F8E"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div id="main-hero">
              <i id="side-toggle" class="fa fa-bars" aria-hidden="true"></i>
              <div class="main-nav">
                <ul>
                  <img id="nav-logo" src="./images/logo-small.png" alt="">
                  <li id="about-btn"><a href="about">About</a></li>
                  <li id="portfolio-btn"><a href="portfolio">Portfolio</a></li>
                  <li id="development-btn"><a href="development">Development</a></li>
                  <li id="login-btn"><a href="login"><i class="fa fa-user" aria-hidden="true"></i> Login</a></li>
                </ul>
              </div>
              <div class="side-nav">
                <i id="side-toggle-small" class="fa fa-times" aria-hidden="true"></i>
                <ul>
                  <li id="side-about-btn"><a href="about">About</a></li>
                  <li id="side-portfolio-btn"><a href="portfolio">Portfolio</a></li>
                  <li id="side-development-btn"><a href="development">Development</a></li>
                  <li id="side-login-btn"><a href="login"><i class="fa fa-user" aria-hidden="true"></i> Login</a></li>
                </ul>
              </div>
              <a href="https://www.jordanstechworld.com/"><img id="logo" src="./images/logo.png" alt="JTW Logo"></a>
            </div>
            <i id="scroll-arrow" class="fa fa-arrow-down" aria-hidden="true"></i>
            <div id="content">
                <h1 id="about-title">About Me</h1>
                <div id="container">
                    <div id="left-box">
                      <p>I am a 17 year old Journeyman Web Developer, Java Developer, and gaming enthusiast. I started getting into HTML, CSS, and dabbling into JQuery slightly. I can make some pretty impressive looking things happen, given time.</p>
                    </div>
                    <div id="right-box">
                        <p>I am a 17 year old Journeyman Web Developer, Java Developer, and gaming enthusiast. I started getting into HTML, CSS, and dabbling into JQuery slightly. I can make some pretty impressive looking things happen, given time.</p>
                    </div>
                </div>
            </div>
            <script>

$(document).on('scroll', function() {
    if($(this).scrollTop() >= 300){
        $('#about-title').css('color', 'red');
    }
});


$(document).ready(function(){
   $(window).bind('scroll', function() {
      var scrollTop = $(window).scrollTop();
      var elementOffset = $('#about-title').offset().top;
      var currentElementOffset = (elementOffset - scrollTop);

      console.log(currentElementOffset);
   });
});

              $(document).scroll(function(){
                if($('#left-box').scrollTop() <= 406){
                  $('#left-box').addClass('slide');
                  console.log("Reached");
                }
                else {
                  $('#left-box').removeClass('slide');
                }
              });

              $("#side-toggle").click(function() {
                $('.side-nav').toggleClass('open');
              });

              $("#side-toggle-small").click(function() {
                $('.side-nav').toggleClass('open');
              });

              $("#scroll-arrow").click(function() {
                $('html, body').animate({
                scrollTop: $("#content").offset().top - 150
              }, 1500);
              });
            </script>
        </body>
    </html>
</doctype>

Answer 1

好的，到此为止。您的示例实际上有效，这是错误的 scrollTop 值。很快就会有解释。

$(document).on('scroll', function() {
    if($(this).scrollTop() >= ($('#about-title').offset().top-$(window).height()/2)){
        $('#about-title').css('color', 'red');
    }
});

这是一个有效的小提琴：https://jsfiddle.net/kjue9e1h/6/

编辑：如果您检查检查器，代码会正常工作。问题是文档滚动了很多超过 300 像素。我下面的代码只是一个近似值，但您应该尝试弄清楚如何创建布局，以便您可以在元素之前测量文档滚动。

Edit2：这是在不满足滚动条件时恢复颜色的改进。

https://jsfiddle.net/kjue9e1h/7/

下次您应该尝试正确创建小提琴，每种类型的代码都在其相应的窗口中。此外，请尝试通过删除不必要的类和/或 ID 来简化您的代码。

Edit3：根据您的评论，这里是如何恢复颜色：

$(document).on('scroll', function() {
    if($(this).scrollTop() >= ($('#about-title').offset().top-$(window).height()/2)){
      $('#about-title').attr('style', 'color:red');
    } else {
        $('#about-title').attr('style','');
    }
});

如果满足条件，则颜色变为红色，否则将其移除。在我的代码中，不是直接内联应用颜色，而是创建一个类并添加/删除它，而不是直接应用颜色。

为了确保它绝对居中，您还应该删除 #about-title 元素的一半高度，但我认为没有必要。但是这里是：

$(document).on('scroll', function() {
    if($(this).scrollTop() >= ($('#about-title').offset().top-$(window).height()/2)-$('#about-title').height()){
      $('#about-title').attr('style', 'color:red');
    } else {
        $('#about-title').attr('style','');
    }
});

https://jsfiddle.net/kjue9e1h/8/

Answer 2

您只需将else 条件添加到scroll 事件处理程序即可。比如：

$(document).on('scroll', function() {
    if($(this).scrollTop() >= 300){
        $('#about-title').css('color', 'red');
    } else {
        $('#about-title').css('color', 'white');
    }
});

当然，您可以将颜色更改为您喜欢的值。

此外，如果您打算根据从顶部的偏移量更改颜色，您可以使用您已经在计算的currentElementOffset 变量。所以你的代码可能是这样的：

$(document).on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    var elementOffset = $('#about-title').offset().top;
    var currentElementOffset = (elementOffset - scrollTop);

    console.log(currentElementOffset);

    if(currentElementOffset >= 300){
        $('#about-title').css('color', 'red');
    } else {
        $('#about-title').css('color', 'white');
    }
});

Answer 3

您可能检查了错误的滚动元素。我建议使用$(window).on('scroll', ...) 或$(document.body).on('scroll', ...)

原因是document 对象本身不是可滚动对象，因为它引用页面上的html 元素。

Answer 4

$(document).on('scroll', function() {
    if($(this).scrollTop() >= ($('#content')/2)){
        $('#about-title').css('color', 'red');
    } else if($(this).scrollTop() <= ($('#content')/2)) {
        $('#about-title').css('color', 'white');
     }
});