滚动后固定导航仅在滚动屏幕后才会固定 [英] Fixed navigation on scroll becomes fixed only after it has scrolled off screen

问题描述

On this site , http://evolutionhire.com/ , I've got a navigation bar which should become fixed when it reaches the top of the screen . However it is not performing as expected in that it becomes fixed a couple of hundred pixels after scrolling off screen as opposed to when it hits the top

我尝试过：



这里是导航的标记

What I have tried:

here's the markup for the navigation

<ul class="menu">
    <li><a href="#camera">CAMERA</a></li>
    <li><a href="#lighting">LIGHTING</a></li>
    <li><a href="#sound">SOUND</a></li>
    <li><a href="#grip">GRIP</a></li>
    <li><a id="consumables" class="open-consumables">CONSUMABLES</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>

这是添加到导航栏中的类固定



。固定{

位置：固定;

顶部：0;

}



和要实现的jquery增加的课程



（功能（$）{

使用严格;



var menuPosition = function（）{

var nav = $（。menu），

height = nav.outerHeight（），
windowHeight = $（窗口）。高度（）;



if（$（window）.scrollTop（）> （windowHeight - height））

nav.addClass（'fixed'）;

else

nav.removeClass（'fixed'）;

};



menuPosition（）;

$（document）.scroll（menuPosition）;

}（jQuery））;

This is the class that's added to the nav to make it fixed

.fixed {
position: fixed;
top: 0;
}

and the jquery to implement the added class

(function ($) {
"use strict";

var menuPosition = function () {
var nav = $(".menu"),
height = nav.outerHeight(),
windowHeight = $(window).height();

if ($(window).scrollTop() > (windowHeight - height))
nav.addClass('fixed');
else
nav.removeClass('fixed');
};

menuPosition();
$(document).scroll(menuPosition);
}(jQuery));

推荐答案

）{

use strict;



var menuPosition = function（）{

var nav =

) {
"use strict";

var menuPosition = function () {
var nav =

（。menu），

height = nav.outerHeight（），

windowHeight =

(".menu"),
height = nav.outerHeight(),
windowHeight =

（window）.height（）;



if（

(window).height();

if (

这篇关于滚动后固定导航仅在滚动屏幕后才会固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！