スクロールトップメソッドの使用方法

Question

スクロールのヘッダーはjQueryに示されているように上下に移動する必要がありますが、モバイルiOSではこれは発生せず、画面の上部にヘッダージャダーが表示されますか？

これは、Chrome、Mozilla Firefox、Internet Explorer、Safari（大規模なブラウザ）で動作します。

これは、スクロールトップメソッドの誤った使用のために発生していますか？これを修正するにはどうすればよいですか？

jQuery(document).ready(function ($) { 
 
var lastScrollTop = 0; 
 
$(window).scrollTop(0); 
 

 
$(window).on('scroll', function() { 
 
    var header = $('header'); 
 
    var content = $('content'); 
 
    var headerBg = $('.header-bg'); 
 
    var headerCnt = $('.header-content'); 
 
    var scrollTop = $(window).scrollTop(); 
 
    var dynHeaderVisible = false; 
 
    
 
    if (lastScrollTop > scrollTop) { 
 
     if (scrollTop <= 400) { 
 
     headerBg.css("height", 0); 
 
     headerCnt.css('color', 'white'); 
 
     } else { 
 
     headerBg.css("height", 80); 
 
     headerCnt.css("height", 80); 
 
     headerCnt.css('color', 'black'); 
 
     } 
 
    } else { 
 
     // Down 
 
     if (scrollTop > 350) { 
 
     console.log ("hi"); 
 
     headerCnt.css("height", 0); 
 
     headerBg.css("height", 0); 
 
     } 
 
    } 
 
    
 
    lastScrollTop = scrollTop; 
 
}); 
 

 
$.fn.isOnScreen = function(){ 
 
    var element = this.get(0); 
 
    var bounds = element.getBoundingClientRect(); 
 
    return bounds.top < window.innerHeight && bounds.bottom > 0; 
 
} 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    margin: 0; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    font-size:1em; 
 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
 
    } 
 
\t a { 
 
    background:transparent; 
 
    border:none; 
 
    letter-spacing:0.15em; 
 
    text-transform:uppercase; 
 
    transition: .3s color; 
 
\t transition: .3s height; 
 
\t } 
 

 

 
header { 
 
    display: block; 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
header ul { 
 
    z-index: 20; 
 
} 
 

 
.header-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: transparent; 
 
} 
 

 
.header-bg, 
 
.header-content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.header-bg { 
 
    z-index: 100; 
 
    color: gray; 
 
    background-color: white; 
 
    border-bottom: 1px solid black; 
 
    transition: .3s height; 
 
    height: 0; 
 
} 
 

 
.header-content { 
 
    z-index: 200; 
 
    transition: .3s color; 
 
    color: white; 
 
    background-color: transparent; 
 
    height: 80px; 
 
    transition: .3s height; 
 
    overflow: hidden; 
 
    list-style: none; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    left: 47%; 
 
\t color: inherit; 
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    padding: 18px; 
 
    cursor: pointer; 
 
    font-size:.8em; 
 
    letter-spacing:0.05em; 
 
\t transition: .3s color; 
 
\t } 
 
</style> 
 
<style> 
 

 
content { 
 
    display: block; 
 
    height: 2000px; 
 
    background-color: orange; 
 
} 
 

 
.stage { 
 
    color: #fff; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    background-color: white; 
 
\t border-bottom: 1px solid black; 
 
    font-size: 48px; 
 
\t height: 200px; 
 
\t width: 100%; 
 
} 
 

 
.stage-0 { 
 
    background: grey; 
 
    height: 400px; 
 
}

<script src= \t "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<header> 
 
    <div class="header-wrapper"> 
 
    <div class="header-bg"></div> 
 
    <div class="header-content"> 
 
     <ul> 
 
     <li> 
 
     <a href="" class="logo">Logo </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header> 
 
<content> 
 
<div class="stage stage-0">1</div> 
 
<div class="stage stage-2">3</div> 
 
<div class="stage stage-4">5</div> 
 
<div class="stage stage-6">7</div> 
 
<div class="stage stage-8">9</div> 
 
<div class="stage stage-10">11</div> 
 
<div class="stage stage-12">13</div> 
 
<div class="stage stage-14">15</div> 
 
<div class="stage stage-16">17</div> 
 
<div class="stage stage-18">19</div> 
 
<div class="stage stage-20">21</div> 
 
<div class="stage stage-22">23</div> 
 
</content>

Answer 1

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(), //Get the current vertical position of the scroll bar for the first element in the set of matched elements 
        header = $('.header-content'); // Target Element 

    if(scrollTop > header.offset().top) { 
     header.addClass('navbar-fixed-top'); 
    } 
} 

Answer 2

固定要素は、この場合のタッチイベント（スクロールIと正常に動作していないため、それをモバイルデバイス上でかなりグラグラ効果を持つことができ、このコードを試してみてください推測）。

私はそれがここの問題なら100％ではありませんが、それは可能性が高いと思います。

Modernisr（https://modernizr.com/）という名前のものがあります。これは、タッチスクリーンで動作しているかどうかなど、ブラウザのすべての種類のものを検出するのに役立ちます。私は現在、タッチイベントと固定要素の間の悪い作業に実際の解決策があるとは思わないが、Modernizrを使用すると、何らかの回避策を見つけることができます。

Goodluck！

Answer 3

position:fixed要素が他のposition: fixed要素にネストされている可能性があります。これは時々、私の経験では、携帯電話に奇妙なバグを引き起こす可能性があります。

だから、このルールからposition:fixedラインを交換してください：

.header-bg, 
.header-content { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 

何も

.header-bg, 
.header-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 

Answer 4

position: absoluteモバイルサファリにスクロール中に実行。あなたは単にあなたのページにgifを置くことができ、スクロール中にこのgifイメージがアニメーションを止めているのを見ることができます。

モバイルSafariでは、 'scroll'イベントはウィンドウのスクロールが停止した後に1回だけ発生します。あなたが本当にスクロールイベントを監視し、リアルタイムでスクロールトップに応じて特定のことをする必要がある場合。 IScroll in githubのような第三者のlibが必要です。

'スクロール'効果をシミュレートするために '翻訳'を使用しました。