Question

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

我正试图将它带到我的＃34; about-title＆＃34;在视口的大约一半处，我的文字变成了红色。问题是我的文字一直是红色的。我花了几个小时试图找到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/

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

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');
     }
});

我的jQuery没有正常工作

4 个答案: