如何使用Scroll top方法

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; } a { background:transparent; border:none; letter-spacing:0.15em; text-transform:uppercase; transition: .3s color; transition: .3s height; } 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%; color: inherit; display: inline-block; width: 15px; height: 15px; padding: 18px; cursor: pointer; font-size:.8em; letter-spacing:0.05em; transition: .3s color; } </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; border-bottom: 1px solid black; font-size: 48px; height: 200px; width: 100%; } .stage-0 { background: grey; height: 400px; } 

 <script src= "//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

固定元素可能會對移動設備產生一些非常不穩定的影響，因為它無法正常處理觸摸事件（在這種情況下，我猜是滾動）。

我不是百分之百，如果這是問題，但我認為這是一個很好的可能性。

有一種名為Modernizr（ https://modernizr.com/ ）的東西可以幫助您檢測各種與瀏覽器相關的東西，包括它是否在觸摸屏上工作。 我認為目前觸摸事件和固定元素之間的工作效果不是真正的解決方案，但是使用Modernizr，您可以嘗試找到某種解決方法。

祝好運！

Answer 3

這可能是因為你有一些嵌套的position:fixed元素在其他position: fixed元素。 根據我的經驗，這有時會在手機上造成奇怪的錯誤。

所以嘗試替換此規則中的position:fixed線：

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

position: absolute

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

Answer 4

在移動野生動物園中滾動時沒有執行任何操作。 你可以簡單地在你的頁面中放一個gif，你甚至可以看到這個gif圖像在滾動過程中停止了動畫。

在移動版Safari中，“滾動”事件僅在窗口停止滾動后觸發一次。 如果你真的需要監控滾動事件並實時根據scrolltop做某些事情。 你需要一些第三方庫，比如github中的IScroll 。

它使用'translate'來模擬'scroll'效果。