Question

我有一个菜单，它是一个普通的块显示div，因为那里有另一个带有注释的div。我希望菜单在向下滚动时固定在顶部固定，但会立即隐藏它。这是因为当用户停止滚动时，它会出现，当用户向上滚动时，它会再次隐藏，当停止 - 出现时，滚动时 - 隐藏等...并且在没有滚动时总是出现。

有人能帮帮我吗？

这是我的菜单代码：

<div class="menu">
      <div class="menu_tab">
      <div class="wrapper">
            <div class="obsah">
                <div class="kolonky" id="strana">
                     <a href="./"><div class="logo"></div></a>
                </div>
                <div class="kolonky" id="stred">
                    <div class="rozbalit"><a href="obchod.php" id="srdce">Obchod</a>
                        <nav>
                            <a href="priprava_navod.php">Jak připravit matcha čaj</a>
                            <a href="jakaje.php">Jak vychutnat matcha čaj</a>
                            <a href="recepty.php">recepty</a>
                        </nav>
                    </div>
                    <div class="rozbalit"><a href="poznejte.php">poznejte matcha</a>
                        <nav>
                <a href="priprava_navod.php">Jak připravit matcha čaj</a>
                <a href="jakaje.php">Jak vychutnat matcha čaj</a>
                <a href="recepty.php">recepty</a>
              </nav>
                    </div>
                    <div class="rozbalit"><a href="priprava_navod.php">příprava</a>
                        <nav>
                <a href="priprava_navod.php">Jak připravit matcha čaj</a>
                <a href="jakaje.php">Jak vychutnat matcha čaj</a>
                <a href="recepty.php">recepty</a>
              </nav>
                    </div>
                    <a href="clanek.php">blog</a>
                    <a href="pribeh.php">o nás</a>
                </div>
                <div class="kolonky" id="strana">
                    <div id="uzivatel">
                        <a href="ucet.php" id="prihlaseni_otevri">Jaroslava B</a>
                        <nav class="uziv_info">
                            <a href="ucet.php">Moje objednávky</a>
                            <a href="ucet.php">Moje adresy</a>
                            <a href="ucet.php">nákupní košík</a>
                            <a href="#">odhlásit</a>
                            <a href="#">nastavení</a>
                        </nav>
                </div>
                <a href="#"><div class="kosik">
                    <span>15</span>
                </div></a>
                <span id="jazyky">CZ</span>
                </div>
            </div>
      </div>
    </div>
    </div>


.hidden_scr{
    display: none !important;
}

.menu{
    width: 100%;
    background: transparent;
    transition-duration: 0.3s;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.menu.cloned{
    background: rgba(255,255,255,0.8);
    z-index: 5;
}

.menu_tab{
    width: 60%;
    margin: 0px auto;
    padding: 20px 0px;
    display: table;
    text-align: center;
    vertical-align: middle;
    table-layout: fixed;
    background: transparent;
}

.menu_wr{
    display: inline-block;
    margin-bottom: -5px;
}

.menu_wr.grey{
    background: #edecf0;
}

.menu.grey.cloned{
    background: rgba(255,255,255,0.8);
}

.menu .obsah{
    display: table-row;
}

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','3').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {    
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
} 


var lastScrollTop = 0;
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
       $('.menu.cloned').addClass("hidden_scr");
   } else {
      $('.menu.cloned').removeClass("hidden_scr");   
   }
   lastScrollTop = st;
}, false);

Answer 1

完成：）

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.menu').outerHeight();
$(window).scroll(function(event){
    didScroll = true;
});
setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }else{
      $('.menu').removeClass('nav-up').addClass('nav-down'); 
    }
}, 250);
function hasScrolled() {
    var st = $(this).scrollTop();
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    if (st > lastScrollTop && st > navbarHeight){
        $('.menu').removeClass('nav-down').addClass('nav-up');
    } else {
        if(st + $(window).height() < $(document).height()) {
           $('.menu').removeClass('nav-down').addClass('nav-up');
        }
    }

    lastScrollTop = st;

    if(document.body.scrollTop === 0){
      $(".nav-up").css("background", "transparent");
      $(".nav-down").css("background", "transparent");
    }else{
      $(".nav-up").css("background", "rgba(255,255,255,0.9)");
      $(".nav-down").css("background", "rgba(255,255,255,0.9)");
    }
}

向下滚动时隐藏JavaScript菜单，停止时出现

1 个答案: