html - sticky-top 和 Logo 显示-6ren

html - sticky-top 和 Logo 显示

转载作者：行者123 更新时间：2023-11-28 01:35:10

25

4

我一直在努力解决一个与在激活粘性 header 时显示 Logo 有关的问题。到目前为止我完成的菜单按预期工作，但我需要在标题变粘时以小版本显示 Logo 并使选项居中。下面是我得到的:

一旦 div 变粘，我就需要这样的东西:

到目前为止，这是我的代码:

.navbar {
  background-color: #fff !important;
}

.navbar .navbar-nav li a {
  color: #b29b72 !important;
}

.navbar .navbar-brand {
  color: #b29b72 !important;
}

.navbar .navbar-brand:hover {
  color: #b29b72 !important;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* HOMEPAGE *****************************************************/

.video-container {
  padding-right: 0px;
  padding-left: 0px;
}

#splash {
  position: relative;
  text-align: center;
  height: 300px;
  background-color: #878787;
}

#splash .video {
  position: relative;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  border-bottom: 1px solid #eee;
}

#splash .opaque {
  opacity: 0.4;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.menu-options {
  padding-top: 12px;
}

.menu-options a {
  color: #b29b72;
  font-weight: 600;
  font-size: 20px;
}

#menu-row {
  height: 50px;
  background-color: #000000 !important;
}

.menu-options ul {
  margin: 0;
  padding: 0;
}

.menu-options ul li {
  display: inline-block;
  width: 120px;
}

<!DOCTYPE html>
<html>

<head>
  <title>My Fantastic Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
    <div class="container">
      <div class="navbar-collapse collapse nav-content order-2">
        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
        </li>
        <button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
      </ul>
      <div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
        <ul class="ml-auto nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu 4</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="menu-row" class="sticky-top">
    <div class="container">
      <div class="row">
        <div class="col-12 menu-options text-center">
          <ul>
            <li><a href="">OPTION 1</a></li>
            <li><a href="">OPTION 2</a></li>
            <li><a href="">OPTION 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid video-container">
    <div id="splash">
      <div class="video">
        <video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
                            <source src="" type="video/mp4">
                            <source src="" type="video/webm">
                        </video>
        <div class="opaque"></div>
      </div>
    </div>
    <div class="container">
      <div class="row" style="height: 100vh;">
        <div class="col-12">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

您需要两个 Logo (大 - 标准。小 - 滚动/导航)。然后执行以下操作，将以下 JQuery 添加到您的代码中，但请确保使用特定的类名(不是我在示例中使用的类名)。

$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      if(!logo.hasClass("sml-logo")) {
        logo.hide();
        logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg-logo")) {
        logo.hide();
        logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
      }
    }

});
});

.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
  <div class="lrg-logo">Logo</div>
</header>
</div>

关于html - sticky-top 和 Logo 显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50725225/

25

4

0

文章推荐： c++ - 使用 std::enable_if 时进行优化

文章推荐： javascript - 通过 Javascript 将 PHP 数组传递给另一个 PHP 脚本

文章推荐： java - 无法在 Android 中将 Open CV 垫从 native C++ 返回到 Java

文章推荐： javascript - 如果存在错误，使用 PHP + 验证表单不会刷新

html - 位置 :sticky - not sticky when it reaches the footer
我有一个父容器。父容器有 2 个带有粘性页眉和页脚的子容器。问题在于，当用户滚动并到达页脚区域时，粘性页眉的位置会发生变化，即它会与其他可滚动内容一起上升。我为演示创建了一个 fiddle 。 htt
css - 在另一个 "sticky"导航栏下方有一个 "sticky"按钮
我有一个应用文件，其中包含我自己的自定义应用栏和不同的页面组件: const styles = theme => ({ appBar: { width:'100%', },
css - Bootstrap 3 : Sticky footer not so sticky
这是我的 jsFiddle带有完整的代码示例。我正在尝试实现 sticky footer .如您所见，我的登录表单非常简短。尽管如此，页脚应该一直固定到页面底部。我试过: .footer {
html - 位置 :sticky div not sticky at the bottom of the screen
我有一个这样的 div : HTML Title
html - GetUIKit Sticky Navbar 在 Sticky 时更改背景颜色
如何让我的粘性导航菜单在粘到屏幕顶部后专门使用 GetUIKit 框架更改背景颜色(即蓝色到白色)？这是我的代码: wo
css - 我的位置 : sticky element isn't sticky when using flexbox
我被困在这个问题上有一段时间了，我想我会分享这个position: sticky + flexbox gotcha: 我的粘性 div 工作正常，直到我将我的 View 切换到一个 flex 盒容器，
css - Safari 位置 : sticky (-webkit-sticky) bug 的解决方法
如果你打开这个 Fiddle https://jsfiddle.net/17uwnsq6/4/在 Safari(12.1.2，但应该适用于所有最新版本)中并开始向下滚动白色可滚动区域，起初粘性“标题”
javascript - 在 Jquery.Sticky.js 的某个点停止 Sticky Div
我在我的网页上使用 jquery.sticky.js。 Div 工作正常，即粘性，但我需要在页脚之前停止 div。我使用下面的代码来粘性 DIV jQuery(文档).ready(function(
javascript - 将类添加到位置 :sticky but is adding class to every sticky element
使用 position:sticky 将此代码添加到我的粘性元素 var $sticky = $('.grid-container .sticky'), $stickyTo = $('.grid-
css - 位置 : sticky behavior on a child element whilst the parent is not sticky?
我正在努力实现一些我不确定是否可能实现的事情。请注意，我正在寻找纯 CSS 解决方案，我知道我可以用 JS 解决这个问题，但我不想这样做。考虑以下笔: https://codepen.io/fchr
javascript - Safari 中的 Sticky Header 可用但不可见(添加了 JavaScript Class sticky)
我向我的网上商店添加了一个粘性 header ，它适用于 FF、Chrome、Edge。在 Safari(Windows 10)中执行 JavaScript， header 被固定和转换 - 但不可
node.js - sticky-session 与 socket.io-sticky-session Node js 库!哪个更好？
我遇到过这两个用于 node js 的粘性 session 库 https://github.com/indutny/sticky-session https://github.com/wzrdtal
html - 需要用 CSS 为占位符设置 "display; none"

WordPress - 元素。尝试优化代码时出了点问题，现在我在页面的第一部分上方有一个巨大的空白空间，我正试图摆脱它。我是新手，正在使用 Elementor，所以我只能使用自定义 CSS。问题出现在

sticky - 粉底粘性仅在移动设备上
我怎样才能让 Foundation 的粘性元素只粘在小断点上？ data-sticky-on="small"适用于小及以上最佳答案对于那些有兴趣的人。我在使用 sass 时找到了这个解决方案。 /
CSS Sticky - 如何粘在一边以填充可用高度？
我想创建网格布局，我想搁置以坚持 top: 0并填充所有剩余高度，例如100% 的高度，当我向下滚动时，我需要将旁边的高度更改为 100% 减去页脚高度。没有JS可以做到吗？ * { paddin
jquery - 你如何制作导航栏 "sticky"？
我正在为一个 friend 制作一个网站，我想将导航栏设为粘性。这是一个例子:http://www.w3schools.com/html/default.asp .我想要一张图片，其中标题在示例中。
html - "Sticky"侧边栏垂直溢出
我们的页面上有一个粘性侧面板，使用以下非常简单的 CSS 实现: position: fixed; top:62px; bottom:10px; top 和 bottom 属性创建所需的边距。问题在
jquery - 如何使悬停状态 "sticky"
我正在使用几乎纯 css，(仅在 css 中执行此操作不是要求)背景图像和相邻的选择器用于呈现独特的人类可读的页面当用户将鼠标悬停在水平堆叠的图像上时(在页面右侧，每个图像都使用顺序后缀的类名
javascript - 我该怎么做才能模拟位置 :Sticky?
如果您不知道 position:sticky 是什么，请观看这个 20 秒长的视频:https://www.youtube.com/watch?v=jA67eda5i-A . 这个 CSS 功能在
css - CSS位置拾取高度:sticky
我已将一个元素设置为粘性，但我没有定义元素应保持粘性的区域。当前区域不是我选择的，而是在我应用 position:sticky 时自动定义的。显然，我想完全控制我的粘性元素用作事件区域的空间，并且我想

首页

博学

6Ren·AI

商城

html - sticky-top 和 Logo 显示