如何在向下滚动时构建浮动菜单栏 [英] How to build floating menu bar when scroll down

问题描述

当我向下滚动网站显示黑色菜单栏在顶部看起来像浮动栏。
但我想有jquery涉及这一点。我已经尝试CSS，但似乎不像我想要的方式为我工作

  #menucontainer {
 position：固定; 
顶部：0; 
 height：250px 
} 
 
 #firstElement {
 margin-top：250px 
} 
  pre> 
 
 
这里是我想要的菜单的基本概念：
 
 
 
  http://avathemes.com/WP/Hexic/  
解决方案
将菜单包含在带有ID或类的div或部分中。
 ＃yourID.fixed {
 position：fixed; 
 top：0; 
 left：0; 
 z-index：1; 
 width：100％; 
 border-bottom：5px solid #ffffff; 
} 
 
 // STICKY NAV 
 $（document）.ready（function（）{
 var top = $（'＃yourID'）。offset .top  -  parseFloat（$（'＃yourID'）。css（'marginTop'）。replace（/ auto /，100））; 
 $（window）.scroll（function（event）{
 //滚动的y位置是
 var y = $（this）.scrollTop（）; 
 
 //是否低于
 if（y> = top）{
 //如果是，则固定类
 $（'＃yourID'）。addClass（'fixed'）; 
} else {
 //删除它
 $（'＃yourID'）。removeClass（'fixed'）; 
} 
}）; 
}）; 
  
不记得我从哪里得到这个，所以没有给我，但它为我工作。
 
When I scrolled down site display black menu bar at the top look like float bar.
but I think there's jquery involved with this. I have tried CSS but seems not working for me like the way i want it to
#menucontainer {
    position:fixed;
    top:0;
    height: 250px
}

#firstElement {
    margin-top: 250px
}
Here is the website basic idea of what I would like the menu to be like:

http://avathemes.com/WP/Hexic/
解决方案
Wrap your menu in an div or section with an ID or class.
#yourID.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-bottom: 5px solid #ffffff;
}

//STICKY NAV
$(document).ready(function () {  
  var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#yourID').addClass('fixed');
    } else {
      // otherwise remove it
      $('#yourID').removeClass('fixed');
    }
  });
});
Can't remember where I got this from, so no salutations to me, but it worked for me.

                        
这篇关于如何在向下滚动时构建浮动菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！