79

したがって、基本的には、ユーザーが少し下にスクロールした後、「ヘッダー」からクラスを削除し、別のクラスを追加して外観を変更したいと思います。

これを行う最も簡単な方法を見つけようとしていますが、私はそれを機能させることができません。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}    

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

私は非常に基本的に間違ったことをしていると確信しています。

4

8 に答える 8

206 
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

フィドル

また、clearHeaderクラスを削除することで、要素からを削除するだけでなく、セレクターposition:fixed;を介してクラスを再選択することもできます。$(".clearHeader")スタイリングの目的で、そのクラスを削除せず、その上に新しいCSSクラスを追加することをお勧めします。

また、ユーザーが上にスクロールしたときにクラスの追加を「リセット」する場合は、次のようにします。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

フィドル

編集：ヘッダーセレクターをキャッシュするバージョンは次のとおりです。スクロールするたびにDOMにクエリを実行せず、参照を失うことなくヘッダー要素のクラスを安全に削除/追加できるため、パフォーマンスが向上します。

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

フィドル

于 2012-09-24T03:01:39.453 に答える
4

必要に応じて、トランジション効果を追加します。

http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader {
  height:50px;
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;

  -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.clearHeader.darkHeader {
 background:#000;
}
于 2015-02-13T18:56:26.103 に答える
3

その私のコード

jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

その動作ファイン

于 2016-10-19T15:35:08.327 に答える
3

純粋なJavaScript

これは、スクロール中にクラスを処理するjavascriptのみの例です。

const navbar = document.getElementById('navbar')

// OnScroll event handler
const onScroll = () => {

  // Get scroll value
  const scroll = document.documentElement.scrollTop

  // If scroll value is more than 0 - add class
  if (scroll > 0) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled")
  }
}

// Use the function
window.addEventListener('scroll', onScroll)
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background-color: #89d0f7;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
  transition: box-shadow 500ms;
}

#navbar.scrolled {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

#content {
  height: 3000px;
  margin-top: 60px;
}
<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>

いくつかの改善

ハンドラーロジックがより複雑になるにつれて、スクロールイベントの処理を抑制したい場合があります。その場合throttleは、lodashlibからの方が便利です。

また、スパを使用している場合は、イベントリスナーが不要になったらクリアする必要があることに注意してくださいremoveEventListener（たとえば、VueonDestroyのようにコンポーネントのライフサイクルフック中、またはReactdestroyed()のフックの関数を返す場合など）。useEffect

lodashによるスロットルの例：

    // Throttling onScroll handler at 100ms with lodash
    const throttledOnScroll = _.throttle(onScroll, 100, {})

    // Use
    window.addEventListener('scroll', throttledOnScroll)
于 2019-10-14T10:12:27.037 に答える
1

この値は意図されたものですか？if (scroll <= 500) { ...これは、500以上ではなく、0から500まで発生していることを意味します。元の投稿では、「ユーザーが少し下にスクロールした後」と言っていました

于 2012-09-24T02:59:33.260 に答える
1

同様のケースで、パフォーマンスの問題のために、常にaddClassまたはremoveClassを呼び出さないようにしたかったのです。スクロールハンドラー関数を、現在の状態に応じて使用される2つの個別の関数に分割しました。また、この記事に従ってデバウンス機能を追加しました：https ://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

        var $header = jQuery( ".clearHeader" );         
        var appScroll = appScrollForward;
        var appScrollPosition = 0;
        var scheduledAnimationFrame = false;

        function appScrollReverse() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition > 500 )
                return;
            $header.removeClass( "darkHeader" );
            appScroll = appScrollForward;
        }

        function appScrollForward() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition < 500 )
                return;
            $header.addClass( "darkHeader" );
            appScroll = appScrollReverse;
        }

        function appScrollHandler() {
            appScrollPosition = window.pageYOffset;
            if ( scheduledAnimationFrame )
                return;
            scheduledAnimationFrame = true;
            requestAnimationFrame( appScroll );
        }

        jQuery( window ).scroll( appScrollHandler );

多分誰かがこれが役に立つと思うでしょう。

于 2018-03-23T15:59:34.933 に答える
0

Androidモバイルの場合、$（window）.scroll（function（）および$（document）.scroll（function（）が機能する場合と機能しない場合があります。代わりに、次を使用してください。

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

このコードは私のために働いた。それがあなたを助けることを願っています。

于 2018-01-24T11:07:55.837 に答える
0

これは@shahzad-yousufの回答に基づいていますが、ユーザーが下にスクロールしたときにメニューを圧縮するだけで済みました。「スキッシュ」を開始するために、「オフスクリーン」をロールする上部コンテナの基準点を使用しました

  <script type="text/javascript">
    $(document).ready(function (e) {
      //position of element
      var scroll_position = $('div.mainContainer').offset().top;
      var scroll_activation_point = scroll_position;
      $(window).on('scroll', function (e) {
        var y_scroll_pos = window.pageYOffset;
        var element_in_view = scroll_activation_point < y_scroll_pos;
        if (element_in_view) {
          $('body').addClass("toolbar-compressed ");
          $('div.toolbar').addClass("toolbar-compressed ");
        } else {
          $('body').removeClass("toolbar-compressed ");
          $('div.toolbar').removeClass("toolbar-compressed ");
        }
      });

    });   </script>
于 2021-09-09T03:27:41.113 に答える