向下滚动时固定导航

时间:2015-01-25 05:21:51

标签: jquery html css fixed navigationbar

脚本正常工作,向下滚动时确实将navContainer放在窗口的顶部但不幸的是,有一些小问题正在驱使我香蕉!

  1. 我希望在标题的outerHeight(页面标题)之后立即触发此函数。使用我所拥有的代码它可以做到但比它应该的前几个像素。看看字母" g",。navContainer应该在它通过字母的最后一个像素(它是容器的高度)之后粘在右上角但是它之前是几个像素(我会说10 px)。 固定

  2. 如果视图端口小于960px,问题是.f-nav转到视口的100%,但我希望它转到100%它的父容器.container -its父容器从其父容器.wrapper继承此属性,该容器具有max-width:60em; margin: 0 auto;padding:0em 0.5em;

  3. 我对第二个问题比第一个问题更关注,是否有任何想法如何解决这个问题?如果您想了解更多细节,请与我们联系。下面的代码段也是on Codepen

    
    
    function testFunction(){/*alert("test");*/
       
    	$(window).scroll(function () {
             var nav = $('.navContainer');
        var headerHeight = $('.headContainer').outerHeight();
    		if ($(this).scrollTop() > headerHeight) {
    	//		$('.f-nav').width($('.nav').width());
                nav.addClass("f-nav");
                $('.nav-wrapper').css('background','#f7f7f7');
    		} else {
    			nav.removeClass("f-nav");
    		}
    	});
        
        };
        testFunction();
    
    body{margin:0;}
    .wrapper{
      margin:0 auto;
      padding:0em 0.5em;
      max-width:60em
    }
    .container{
      background:gray;
    }
    .navContainer{
      border-top:2px black solid;
      border-bottom:2px black solid;
    
    }
    .navContainer ul {
      list-style:none;
      margin:0;padding:0;
    }
    .headContainer{
      height:100%;
      color:white;
      font-family:'tahoma';
      font-size:50px;
      padding-bottom:30px;
    }
    .navContainer ul{background:green;}
    .navContainer li{
      display:inline;
      padding:0px 50px;
      vertical-align:middle;
      background:red;
      margin:0px;
      margin-right:10px;
    }
    .wrapper img{width:100%;}
    .f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;max-width: 60em;
    }
    
    <div class="wrapper">
    <div class="container">
      <div class="headContainer">Page Title</div>
      <div class="navContainer">
        <ul>
          <li> Home 1</li><li> 
          Home 2</li><li> 
          Home 3</li>
        </ul>
      </div>
    </div>
    <img src="http://lorempixel.com/output/abstract-h-c-640-1920-9.jpg">
    </div>
    &#13;
    &#13;
    &#13;

2 个答案:

答案 0 :(得分:0)

  1. 问题在于Bodymargin: 10px;这就是为什么导航的固定顶部比您预期的更早。将margin设置为0,可以实现更顺畅的过渡。

  2. 您是否遗漏了Codepen中的一些代码,因为没有.fixed-nav,除非您的意思是.f-nav。但.f-nav的父级是.container。所以你需要清除它。

答案 1 :(得分:0)

var header = document.querySelector('#mainMenu'); 

window.addEventListener("scroll", function(event) {
	this.scrollY > header.getBoundingClientRect().top ? header.classList.add('f-nav') : header.classList.remove('f-nav')
}, false); 
*{box-sizing: border-box; padding: 0; margin: 0}
.rowWrap{
  margin:0 auto;
  padding:0em 0.5em;
  max-width:60em
}
.container{
  background:gray
}
menu.rowWrap{
  border-top:2px black solid;
  border-bottom:2px black solid;
  background:green
}
menu li {
  list-style:none;
  margin:0;padding:0
}
header h1{
  height:100%;
  color:white;
  font-family:'tahoma';
  font-size:50px;
  padding-bottom:30px
}

menu.rowWrap li{
  display:inline-block;
  padding:0px 50px;
  vertical-align:middle;
  background:red;
  margin:0px;
  margin-right:10px
}
article.rowWrap img{width:100%}

.f-nav{ 
    z-index: 9999; 
    position: fixed; 
    top: 0;
    right: 0;
    left: 0
}
<header class=container>
    <div class=rowWrap>
        <h1>Page Title</h1>
    </div>
</header>

<section id=mainMenu class=container>
    <menu class=rowWrap>
        <li> Home 1</li>
        <li> Home 2</li>
        <li> Home 3</li>
    </menu>
</section>

<section class=container>
    <article class=rowWrap>
        <img src="http://lorempixel.com/output/abstract-h-c-640-1920-9.jpg" />
    </article>
</section>