Question

我的页面标题栏中有一个绝对定位的徽标，滚动时会一直向下移动。

我不想要这种行为，我希望当访问者向下滚动页面时，徽标会粘在页面顶部而不会覆盖其他元素。

以下是相关页面。

www.giracci.com

和标题徽标代码。

logoWrapper {
    float: left;
    height: 0;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 30;
}

如果你查看该页面，你会发现它不会保持不变，它会随页面滚动。

Answer 1

第一：
将相关的HTML和CSS复制到您的问题中。你没有包括的等式还有很多。你需要基本上包括导航容器以及CSS的所有html，并指出你的问题包括bootstrap（我已经为你完成了这个）。

第二：
它表现出这种行为的原因是因为其中一个容器 - nav#site-navigation - 在滚动时应用了fixed类，它应用了以下样式：

nav.fixed {
    position: fixed;
    visibility: hidden;
    opacity: 0;
}

并且，因为您在徽标包装器上使用了visible-lg的引导类，所以它具有以下样式：

.visible-lg {
    display: block !important;
}

覆盖.fixed隐藏属性。

而且，由于徽标位于该包装内，因此当您不希望徽标出现时，徽标就会显示出来。

所以，你正在使用碰撞类，需要理顺它们。

Answer 2

将此添加到您的css文件中：无需更改大部分代码。导航栏在滚动时添加固定类。

nav.fixed .logoWrapper {
    display: none;
}

Answer 3

首先，我会在css中更改这些参数以正确显示导航，以确保菜单项不会低于徽标：

.container {
  width:auto;
}
.container.nav-bar {
    width:auto;
    margin:0 60px;
}

完成此操作后，如果您想要在您滚动页面时隐藏翻页（徽标和导航），请将其添加到您的css中：

nav.fixed.scrolled {
    display:none;
}

但是，如果您希望在滚动页面时修复唯一徽标，请在CSS上添加和编辑这些参数：

.logoWrapper {
    position:fixed;
}

Answer 4

还有一种方法可以尝试。因为目前在你的网站上它会立即消失所以感觉有一种小故障/口吃，非常轻微。我用我的logo需要这样的东西，所以我用JS做了。它就像一个魅力。以下是代码：

$(window).scroll(
  function () {
   var top = 75;
   var currentTop = $(window).scrollTop();
    if (currentTop > top) {
        $(".logo").css("opacity", "0");
       } else {
         $(".logo").css("opacity", "1");
       }
});

只需将.logo替换为.logowrapper或其他。希望它有效。

带页面的标题卷轴中的绝对定位徽标

4 个答案: