javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)-6ren

javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)

转载作者：太空宇宙更新时间：2023-11-04 01:03:47

25

4

我想要一个粘性标题导航菜单，在桌面浏览器上包含文本和图标，但在移动设备上只有图标(如我在本文底部的草图所示 - 忽略使用的颜色。)我已经开始在这里编写代码:https://codepen.io/jord8on/pen/pxgjZq

This article给出了另一个我想要拥有的例子。 (特别是“选项卡式导航”样本的第三个)

以下是我需要的帮助:

当浏览器宽度缩小到 600 像素以下时，我希望图标旁边的标签/文本消失，只显示图标。
我希望 .navbar 在桌面和移动设备上保持粘性并在用户向下滚动时保持在屏幕顶部。
我希望突出显示“事件”菜单项，具体取决于用户在站点中的位置。
1. 主页、类(class)、资源和事件都将位于 Wordpress 站点内的不同区域。
2. “社区”选项卡将链接到运行 Discourse 社区的子域

如有任何帮助，我们将不胜感激! 🙌

当前的 CSS/HTML:

/* Style the navigation bar */
.navbar {
  width: 100%;
  background-color: #B7234C;
  overflow: auto;
}

/* Navbar links */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px 0px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 20%;
}

/* Navbar links on mouse-over */
.navbar a:hover {
  background-color: #961d3f;
}

/* Current/active navbar link */
.active {
  background-color: #d6295a;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
  }
}

<!-- Load font awesome icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-comments"></i> Community</a> 
  <a href="#"><i class="fa fa-fw fa-edit"></i> Courses</a> 
  <a href="#"><i class="fa fa-fw fa-star"></i> Resources</a>
	<a href="#"><i class="fa fa-fw fa-calendar"></i> Events</a>
</div>

最佳答案

在 anchor 标签中的文本之间放置一个跨度，并将其定位在媒体查询上，并显示为 none
在您的导航栏上固定一个位置，您可能需要重新设置正文的边距。我在高度上添加了 4000 像素以反射(reflect)粘性滚动。
根据页面更改 body 标记上的类，并在需要时在 CSS 中进行编辑，此示例以事件图标为目标。 Codepen希望这会有所帮助。

body{
  margin: 0;
  height: 4000px;
}
/* Style the navigation bar */
.navbar {
  position: fixed;
  width: 100%;
  background-color: #B7234C;
  overflow: auto;
}

/* Navbar links */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px 0px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 20%;
}

/* Navbar links on mouse-over */
.navbar a:hover {
  background-color: #961d3f;
}

/* Current/active navbar link */
/* In your html you change the body class and target it in here */
/* This example uses the events icon which is a child 5 in the navigation */
.events .navbar a:nth-child(5) {
  background-color: #d6295a;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 700px) {
  
  .navbar{
    display: flex;
  }
  .navbar span{
    display: none;
  }
}

<!-- Change the class name depending on the page that you're in then modify the css -->
<body class="events">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Load font awesome icon library -->

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i><span> Home</span></a> 
  <a href="#"><i class="fa fa-fw fa-comments"></i> <span>Community</span></a> 
  <a href="#"><i class="fa fa-fw fa-edit"></i><span> Courses</span></a> 
  <a href="#"><i class="fa fa-fw fa-star"></i> <span>Resources</span></a>
	<a href="#"><i class="fa fa-fw fa-calendar"></i><span> Events</span></a>
</div>
</body>

关于javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52616528/

25

4

0

文章推荐： css - React 和 CSS 样式

文章推荐： c - 多次调用 pthread_join 如何工作？

文章推荐： java - 返回在各种语言的函数中创建的数组和对象

文章推荐： node.js - 将静态卡片分享到 G+ 圈子

javascript - 粘性/快速滚动不会向上滚动
我有一个脚本，允许在向下移动时快速滚动，但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
html - 粘性/固定下拉菜单不随页面滚动
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport)，则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
html - 控制移动浏览器滚动的速度(粘性)
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗？我专注于 android 浏览器。最佳答案不，滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
iis - Haproxy 粘性 session
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切，但是，不幸的是，检查客户端浏览器我发现没有添加 cookie(平
java - 粘性 Eclipse 错误标记
清理并重建后，Eclipse Problems View 中出现错误标记，尽管一切都应该没问题。如何消除这种不一致的错误？最佳答案在这里，我回答自己接下来的步骤对我有用: 关闭 Eclipse
jquery - 粘性 div 工作不正确
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
jquery - 粘性 div 在滚动时不会粘在顶部
我希望我的 div 调用:如果我向下滚动，top 将粘在顶部，但现在它不会粘在顶部。我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
javascript - 粘性 header /Javascript
早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？我的网站:http://www.trevorpeters.co.uk/tpwebde
jquery - 粘性 Bootstrap 导航栏不工作
我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您
html - 粘性 CSS 页脚损坏
我的页脚设计为位于页面底部，即使其上方的 div 仅包含少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？提前致谢。 CSS: body { margin: 0;
css - 粘性 flexbox 页脚未固定到底部
我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。在桌面网络浏览器上，它可以完美运行。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该
html - 粘性 Div 需要被吃掉
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时，我可以让页脚粘在页面底部，但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推？一个很好的例子是
javascript - 粘性 header 在滚动时无法正常工作
我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。这正是我想要的外观/感觉
html - 粘性 header 始终可见？
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件，我对此非常满意，但标题仅出现在一些像素之后，并不总是在顶部可见。有谁知道我如何修改代码以使其始
javascript - 粘性 header 锯齿状运动
我目前正在创建一个网站，遇到了一个问题，每当我滚动我的粘性标题时，页面就会跳到下一个元素的底部，有人知道这是为什么吗？我已经尝试更改页面上基本上所有元素的填充，包括横幅、标题、文本本身，甚至 anc
html - 如何使用 CSS 粘性
我创建了一个简单的表格，顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码？谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
javascript - 创建两个不同的标题——粘性/滚动和顶部
使用我当前的代码，当页面加载时，白色条形标题位于顶部。当你滚动时，它会消失，当你滚动到顶部时，白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
html - 粘性 header 到相对父级并溢出
我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之
html - 粘性 header 卡在网站中间
我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。我认为这很容易解决，但我太笨了... 我试图删除其他元素，因为我认为它们与标题
jquery - 粘性 header 在断点处留下大空间
我的代码有点卡在粘性 header 上。如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770)，

首页

博学

6Ren·AI

商城

javascript - 如何创建在移动设备和桌面设备之间动态变化的粘性 header (无汉堡包)