0

ページの最上部にあるスティッキーナビゲーションを非表示にするスクリプトを探しています。したがって、最後に、下にスクロールしてサイトに入ると表示され始めるはずです。

これは私が構築しているサイトです：http：//kmnew.kadushimarketing.com/index.php

これは私が現在使用しているスクリプトです：

$(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
4

2 に答える 2

0

これがあなたが探しているものかどうかはわかりません。スクロールトップがウィンドウの高さよりも大きい場合は、それを表示して上部に配置します

$(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
        var windowHeight = $(window).height();

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > windowHeight) { 
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0, 'display': 'block' });
        } else {
            $('#sticky_navigation').css({ 'position': 'relative', 'display': 'none' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
于 2012-12-26T18:34:48.487 に答える
0

わかった。スクリプトを次のように変更しました。

$(document).ready(function(){

    // hide #sticky_navigation first
    $("#sticky_navigation").hide();

    // fade in #sticky_navigation
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#sticky_navigation').fadeIn();
            } else {
                $('#sticky_navigation').fadeOut();
            }
        });


    });

});

次に、位置も追加しました。cssに固定されています。

于 2012-12-26T19:11:34.293 に答える