jQueryウィンドウスクロール、scoll down上に戻る

Question

スクロールスクロール機能を使用してスティッキーヘッダーを作成し、時に特定の高さ（私が推測する）を作成するときは、ページの先頭に戻ります。

はこれを録画：http://take.ms/s9mGh8

これは私の関数である：

$(window).scroll(function(e){ 
    $('#main').toggleClass('fixed', $(this).scrollTop() > $('#header').height()+25); 
}); 

がどのように私はこの問題を解決することができますか？

Answer 1

固定された要素はDOM内にスペースをとらないという問題があります。だから、ここで起こっているのはあなたのヘッダがスペースを取って、ページをスクロールし、position:fixedというヘッダを設定して、それ以上スペースを取らないようにして、すべての要素が上に移動し、スクロールバーが消えるということです。

この動作を防止するには、クラスを変更するときに文書に「欠けている高さ」を追加する必要があります。たとえば、プレースホルダーdivを追加する場合は、StickyKitによって使用されるコミュニケーション技法。あなたがここに基本的なコードを見ることができます

：もちろんhttps://jsfiddle.net/jaL765t1/

var flag = false; 
$(window).scroll(function(e){ 
    var passed_point = $(this).scrollTop() > $('#header').height()+25; 

    if(passed_point && !flag){ 
    var surrogate = $('<div>', { 
     'class' : 'js-surrogate', 
     css : { 
     height : $('#header').height() 
     } 
    }); 
    $('#header').before(surrogate); 
    $('#main').addClass('fixed'); 

    flag=true; 
    }else if(!passed_point && flag){ 
    $('#main').removeClass('fixed'); 
    $('#header').prev('.js-surrogate').remove(); 
    flag=false; 
    } 
}); 

を、このコードは良いはありませんが、簡単に出発点としてそれを使用することができます。

Answer 2

私はこのようなことをしようとしていると思います。

ヘッダーを固定したい場合、なぜクラスをメインに置くのですか？あなたは、コード

HTML

<div id="main"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 

JS

$(window).scroll(function(){ 
if ($(window).scrollTop() >= 2) { 
    $('#header').addClass('fixed'); 
    $("#content").css({"margin-top": $('#header').outerHeight() +"px"}); 
}else { 
    $('#header').removeClass('fixed'); 
    $("#content").css({"margin-top":"0px"}); 
} 
}); 

CSS下に試すことができます

$(function(){ 
 
    $(window).scroll(function(e){ 
 
    //console.log($(this).scrollTop() > $("#header").height()) 
 
    //^--console.log() for testing the Boolean 
 
     $("#header").toggleClass("fixed", $(this).scrollTop() > $("#header").height()) 
 
    }) 
 
})

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#header{ 
 
    height:90px; 
 
    background: purple; 
 
} 
 
.fixed{ 
 
    position: fixed; 
 
    top:0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.content{ 
 
    height: 4000px; 
 
    background: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    Header 
 
</div> 
 
<div class="content"> 
 
    content 
 
</div>

Answer 3

#header{ 
    height : 90px; 
    background-color : grey; 
    width : 100%; 
} 
.fixed{ 
position: fixed; 
top:0; left:0; 
width: 100%; 
z-index: 9999; 
} 

#content{ 
    height : 105vh; 
}