Wie Scroll Top-Methode verwenden

Question

Die Kopfzeile auf Scroll sollte rutschen/nach unten, wie in der jQuery angezeigt, jedoch in mobilen iOS dies nicht auftritt und die Kopfruder am oberen Rand des Bildschirms ruckelt?

Dies funktioniert auf Chrome, Mozilla Firefox, Internet Explorer und Safari - auf großen Browsern.

Tritt dies aufgrund einer falschen Verwendung der Scroll-Top-Methode auf? Wie korrigiere ich das?

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

Versuchen Sie diesen Code

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

Feste Elemente ein paar ziemlich wackelig Auswirkungen auf mobile Geräte haben können aufgrund nicht das Scrollen ich richtig mit Touch-Ereignisse (in diesem Fall arbeiten vermuten).

Ich bin nicht 100%, wenn das das Problem hier ist, aber ich denke, es gibt eine gute Möglichkeit, dass es ist.

Es gibt etwas namens Modernizr (https://modernizr.com/), mit dem Sie alle Arten von browserbezogenen Sachen erkennen können, auch wenn es auf einem Touchscreen funktioniert oder nicht. Ich glaube nicht, dass es derzeit eine echte Lösung für das schlechte Arbeiten zwischen Touch-Ereignissen und festen Elementen gibt, aber mit Modernizr können Sie versuchen, eine Art Workaround zu finden.

Goodluck!

Answer 3

Es könnte sein, weil Sie einige verschachtelte position:fixed Elemente in anderen position: fixed Elemente haben. Dies kann nach meiner Erfahrung manchmal seltsame Bugs auf Handys verursachen.

So versuchen, die position:fixed Linie von dieser Regel zu ersetzen:

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

mit position: absolute

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

Answer 4

Nichts ausführen während auf mobilen Safari-Scrolling. Sie können einfach ein gif in Ihre Seite einfügen, und Sie können sehen, dass dieses gif-Bild beim Scrollen nicht mehr animiert wird.

Auf einer mobilen Safari wird das Ereignis "scroll" nur einmal ausgelöst, nachdem das Fenster nicht mehr gescrollt wurde. Wenn Sie Scroll-Ereignis wirklich überwachen müssen und bestimmte Dinge nach Scrolltop in Echtzeit tun. Sie benötigen eine Drittanbieter-Lib wie IScroll in github.

Es verwendet 'übersetzen', um den 'Scroll' Effekt zu simulieren.