Question

我有一个网站。还有一个始终位于屏幕顶部的徽标。当你向下滚动仍然存在时，屏幕顶部仍然可以看到它。这可以。在顶部，徽标图像有一个链接，但当您向下滚动时，您将丢失它。我希望链接与图像一起使用。我希望我很清楚。这是html：

<div class="col-md-12" id="menu">
        <div class="col-xs-3 col-sm-2 col-md-2" id="logoparent">
            <div id="logo">
                <!--<h3>LOGO</h3>-->
                <a href="#menu" id="logoa"><img src="Logo.png" id="thelogo"></a>
            </div>
        </div>
        <div class="col-xs-1 col-sm-2 col-md-6 space">
            <!-- empty -->
        </div>
        <div class="col-xs-8 col-sm-2 col-md-1 menuitem" id="home">
            <h3><a href="index.php">Home</a></h3>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="gallery">
            <h3><a href="#uresnyille">Gallery</a></h3>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="about">
            <h3><a href="#uresnyille1">About</a></h3>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="contact">
            <h3><a href="#uresnyille2">Contact</a></h3>
        </div>
    </div>

和css：

#logo{
   position: fixed;
   z-index: 99;
   height: 60px;
   width: auto;
   overflow: hidden;
   margin-left: auto !important;
   margin-right: auto !important;
}
#logoa{
    position: relative;
    z-index: 99;
}
#thelogo{
    position: fixed;
    z-index: 99;
    height: 50px;
    width: auto;
    margin-top: 5px;
}
#menu{
   position: relative;
   z-index: 5;
}
#content-all{
   position: relative;
   z-index: 5;     /*which is everything under the menu*/
}

Answer 1

我建议您单独添加该徽标的链接，这样当您点击徽标时，您会转到相应的链接，如果该徽标与链接有关，则总是添加使用嵌套DOM来设置它的样式。

Answer 2

您可以将所有菜单标签放在主标签中，并为主标签设置css样式，如此

#menu1{
  position: fixed;
  top:10px;
  left:10px;
  height: 60px;
  width:50px;

}

检查

JSFiddle

链接不会停留在屏幕顶部的图像

2 个答案: