Question

您好这是我的第一篇文章，因为我不知道任何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

$（function（）{

// 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(); 
});
});

Answer 1

这是因为您的.main-nav a设置为inline-block，当main-nav为fixed时，会显示徽标，a将自己与默认情况下为bottom。只需添加

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

看一个小提琴：http://jsfiddle.net/V4rCR/

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

1 个答案: