スクロール後にイメージを上に固定/固定 - イメージが上にまっすぐにジャンプしますか？

Question

ウェブページの中央に画像があります。ユーザーがスクロールしてイメージがウィンドウの一番上に表示されたら、イメージをページの上部に固定して、ページと共にスクロールさせようとしています。

しかし、ウィンドウの上部に当たったときにこだわるのではなく、ユーザーがスクロールするとすぐに画像がページの上部にジャンプしています。ユーザーがページにいる間、イメージは一番上に固定されていますが、ページが更新されると固定されたままになります。

これを理解できないようです - 助けてください！

index.htmlを

<img src="./assets/img/logo.png" class="logo" alt="Logo"> 

style.cssに

.logo { 
    width: 500px; 
    display: block; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

main.js

​​

Answer 1

私はあなたがする必要があるすべてはあなたが戻ってスクロールダウンしたときに初期のトップ値をリセットだと思う：

var boxInitialTop = $('.logo').offset().top; 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > boxInitialTop) { 
 
     $('.logo').css({ 
 
     position: 'fixed', 
 
     top: '0px' 
 
     }); 
 
    } else { 
 
     $('.logo').css({ 
 
     position: 'absolute', 
 
     top: '200px'   // add this to "reset" the top to it's original (that you set in your css) 
 
     }); 
 
    } 
 
    });

body {height:2000px;} 
 

 
#test { 
 
    height: 400px; 
 
    position: relative; 
 
} 
 

 
.logo { 
 
    width: 500px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <img src="http://lorempixel.com/400/200/city/" class="logo" alt="Logo"> 
 
</div>

Answer 2

$ (function() { 
    var boxInitialTop = $ ('.logo'). offset(). top ; 
    $ (window). scroll (function () { 
    if ($ (window). scrollTop() > boxInitialTop) { 
     $ ('.logo'). css ({ position : 'relative' , top : '0px' }); 
    } else { 
     $ ('.logo'). css ({ position : 'absolute' }); 
    } 
    }); 
}); 

Answer 3

要素の元の配置を、開始位置（elseの後）に戻す必要があります。要素がposition:absoluteに戻ったら、topプロパティが200pxに返されていることを確認する必要があります。それ以外の場合は、fixedのときに設定された値、つまり0が保持されます。

は、以下を参照してください。

$(function() { 
 
    var boxInitialTop = $('.logo').offset().top; 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > boxInitialTop) { 
 
     $('.logo').css({position: 'fixed', top: '0px'}); 
 
    } else { 
 
     $('.logo').css({position: 'absolute', top : boxInitialTop+'px'}); 
 
    } 
 
    }); 
 
});

Answer 4

あなたのコードが動作します。

elseセクションのtopの値をリセットするだけで済みます。 このようにしてifセクションに設定されているので、0pxのままです。