当导航栏固定为粘性导航时，导航链接从导航栏向下推

nav links being pushed down from navigation bar when navbar is fixed for sticky navigation

本文关键字：导航 链接 下推      更新时间：2023-09-26

你好，这是我的第一篇文章，我迷路了，因为我不知道任何JavaScript。我创建了一个粘性菜单，但当菜单处于固定位置时，链接会跳下来。如有任何帮助，不胜感激

HTML 

     <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/asistyle.css" />
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"     type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<title>Home</title>
</head>
<body>
    <header> <a href="images/A-img.png"><img src="images/A-img.png" alt="ASILogo" height="100%" /></a>
  <h2>"Quality <br> Customised <br> Accredited <br>Training"</h2>
</header>
<nav class="main-nav">
    <a href="images/asilogo.jpg"><img src="images/asilogo.jpg" alt="ASILogo" width="100%" image id="menulogo"class="imagenavpadding"/></a>
    <a href="index.html">Home</a>
    <a href="#">About</a>
    <a href="#">Courses</a>
    <a href="location.html">Location</a>
    <a href="#">Contact</a>
    <a href="#">Vacancies</a>
</nav>
    <div class="content">
          <h2>Lorem ipsum dolor sit amet</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, purus in porttitor pellentesque, erat arcu tincidunt diam, dapibus faucibus leo mauris at sapien. In porttitor vehicula sodales. Vivamus massa neque, facilisis eu felis ut, aliquet convallis nisi. Nam elementum tellus vitae gravida fermentum. Nullam et imperdiet leo. Integer ut euismod lorem, in placerat lacus. Curabitur bibendum arcu ut feugiat commodo. Suspendisse ut mi vel orci ullamcorper tincidunt. Nam vitae fringilla nibh. Nullam hendrerit blandit velit eu hendrerit.</p>
</div>
<footer>
</footer>
</body>
</html>
CSS 

#navwrap{
height: 120px;
width: 100%;
background: #e6e6e7;
}
.main-nav {
background: #fc6c0c;
height: 120px;
width: 100%;
z-index: 150;
position: relative;
margin: 0 0 0 0;
text-align: center;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.main-nav a{
background: #fc6c0c;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
top-margin: -30%;
width: 12%;
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 2% 0;
}
.main-nav a:visited {
text-decoration: none;
color: #ffffff;}
.main-nav a:hover {
color: #959595;}
#menulogo{
opacity: 1;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;}
.content {
position: relative;
width: 100%;
background: #e6e6e7;
padding-top: 120px;
column-count: 2;
column-gap: 40px;
}

JS

$(函数(){

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('.main-nav').offset().top;
$("#menulogo").hide();
// 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 image=$("#menulogo");
    // 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) { 
        $('.main-nav').css({ 'position': 'fixed', 'top':0, 'left':0, 'opacity':0.9, });
        image.show();
    } else {
        $('.main-nav').css({ 'position': 'relative', 'opacity':1});
        image.hide(); 
        }   
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});
// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){ 
    event.preventDefault(); 
});
});

这是因为您的.main-nav a被设置为inline-block，而当main-nav被设置为fixed时，徽标出现，并且a默认与bottom对齐。只需添加

.main-nav a{
vertical-align:top;
}

参见:http://jsfiddle.net/V4rCR/

相关文章：