我的jQuery的不能正常工作

我的網站是https://www.jordanstechworld.com/我的jQuery的不能正常工作

我試圖使它的地方，當我的「關於標題」的頂部是在大約視口的半路上，我的文字變成紅色。問題是我的文本一直都是紅色的。我花了數小時試圖找到特種部隊的解決方案，並嘗試了多種不同的東西。我用這對我的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>

來源

2017-10-18 Jordan Fleetwood

請創建工作撥弄，使我們可以單獨複製。 – scooterlord

@scooterlord https://jsfiddle.net/kjue9e1h/2/也許這將工作？ –

已更新@scooterlord鏈接。 –

好吧，在這裏。你的例子實際上起作用了，它的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。我下面的代碼只是一個近似值，但你應該做的是試圖找出如何創建你的佈局，以便你可以在你的元素之前測量文檔滾動。

編輯2：如果不滿足滾動條件，這是對還原顏色的改進。

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/

來源

2017-10-18 13:32:56 scooterlord

使用它，在我的實際頁面上不起作用。文字始終呈紅色。爲什麼？小提琴它雖然工作。 –

嘗試逐個刪除部分代碼，直至找出錯誤。乍一看，只是用檢查顯示大量的「紅色」的。也這是一個很好的戰術把Javascript文件/頁面底部的腳本，右收盤標記之前。 – scooterlord

問題是我在一所學校的Chromebook現在與檢查殘疾人... –

你應該只添加一個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'); 
    } 
});

來源

2017-10-18 13:30:57 Nisarg

你可能正在檢查滾動的錯誤元素。我建議要麼使用$(window).on('scroll', ...)或$(document.body).on('scroll', ...)

原因是，該document對象本身不是一個滾動的對象，因爲它指的是頁面上的html元素。

來源

2017-10-18 13:31:12

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

來源

2017-10-18 13:33:44

我的jQuery的不能正常工作

回答

相關問題