私のjQueryのが正常に動作していない

私のウェブサイトは、https://www.jordanstechworld.com/私のjQueryのが正常に動作していない

は、私は私の「について - タイトル」のトップは、ビューポートの半分の方法については、私のテキストが赤に変わりである場合ときにそれを作るしようとしていますです。問題は、私のテキストが常に赤であることです。私はSOFの解決策を見つけようと数時間を費やし、複数の異なることを試みました。

<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以上の文書をスクロールすることです。下のコードは近似値ですが、要素の前にスクロールした文書を測定できるようにレイアウトを作成する方法を理解してください。

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/

出典

2017-10-18 13:32:56 scooterlord

それを使用して、私の実際のページでは動作しません。テキストは常に赤です。どうして？フィドルでもそれは動作します。 –

間違ったものを整理するまで、コード部分を部分的に削除してみてください。一見すると、インスペクタを使用するだけで、多くの「レッド」が表示されます。また、ページの下部、つまりタグの直前にJavascriptファイル/スクリプトを配置するのは良い方法です。 – scooterlord

問題は、現在、学校のクロムブックにあり、検査が無効になっています... –

あなただけscrollイベントハンドラにelse条件を追加する必要があります：私はここに私のjQuery

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

のためにこれを私のHTMLれる使用しています。次のようなものがあります。

$(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

：だからあなたのコードは次のようなものかもしれません。私はそれがページ上のhtml要素を指すdocumentオブジェクト自体は、スクロール可能なオブジェクトではないということで$(window).on('scroll', ...)または$(document.body).on('scroll', ...)

理由のいずれかを使用してお勧めします。

出典

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のが正常に動作していない

答えて

関連する問題