固定导航菜单与jQuery
固定导航菜单是指在网页滚动时，导航菜单始终保持在页面的固定位置，不随滚动而移动。这种导航菜单可以提供更好的用户体验，使用户在浏览网页时能够方便地访问导航链接。
固定导航菜单通常使用jQuery等前端框架来实现。jQuery是一种快速、简洁的JavaScript库，提供了丰富的API和插件，方便开发人员操作HTML文档、处理事件、实现动画效果等。
在实现固定导航菜单时，可以使用jQuery的scroll事件来监听页面滚动，通过判断滚动距离来控制导航菜单的显示与隐藏。具体实现步骤如下：
- 引入jQuery库：在HTML文件中引入jQuery库的CDN链接或本地文件。
- 编写HTML结构：按照需求设计导航菜单的HTML结构，通常使用无序列表（ul）和列表项（li）来构建导航菜单。
- 添加CSS样式：为导航菜单添加合适的CSS样式，包括位置、背景色、字体样式等。
- 编写JavaScript代码：使用jQuery选择器选中导航菜单的元素，并绑定scroll事件。在事件处理函数中，判断页面滚动距离，如果超过某个阈值，则显示导航菜单，否则隐藏导航菜单。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>固定导航菜单示例</title>
<style>
/* 导航菜单样式 */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
<div style="height: 2000px;"></div> <!-- 占位，使页面有滚动条 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) { // 当滚动距离超过100px时显示导航菜单
$('#navbar').fadeIn();
} else {
$('#navbar').fadeOut();
}
});
});
</script>
</body>
</html>在这个示例中，导航菜单的id为"navbar"，初始时设置为display: none;，即隐藏状态。当页面滚动距离超过100px时，使用fadeIn()方法显示导航菜单；否则，使用fadeOut()方法隐藏导航菜单。
对于固定导航菜单的应用场景，它适用于需要长页面滚动的网站，如博客、新闻网站等。通过固定导航菜单，用户可以随时点击导航链接，快速跳转到其他页面内容，提高用户体验。
腾讯云提供了丰富的云计算产品，其中与前端开发相关的产品包括云服务器（CVM）、云存储（COS）、内容分发网络（CDN）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多相关产品信息。
相关·内容
我是一个全新的JQuery新手，我一直在基于一个模板构建一个wordpress站点，有一个恼人的小故障，就是手风琴菜单会跳起来，有时会在你滚下后跳一段时间。我想要做的是停止它作为悬停的工作，而改为只在点击时打开/关闭。
这是我的代码
/*
主菜单
*/
函数mainMenu () {
jQuery("nav ul li").hover(function ()
{
jQuery(this).find("ul").fadeIn(0).slideUp(0).slideDown(800);
}, function ()
{
jQuery(thi
浏览 1提问于2012-07-10得票数 0
1回答
卷轴上其他导航条下的Nav棒棒
、、、、
我想问一下，怎么才能把一个导航条贴在其他导航杆下，然后定位好呢？
实际上，我希望菜单底部的导航巫婆在页面底部，当我开始运行时，它被卡在菜单顶部的导航下。
$(document).scroll(function () {
var scroll = $(this).scrollTop();
var topDist = $("").position();
if (scroll > topDist.top) {
$('.menu').css({"position":"absolute",
浏览 2提问于2014-10-15得票数 1
回答已采纳
2回答
走得太远了
、、、
网址：
当单击右上角的菜单图标时，导航会打开，但它会滑到页面下方太远的地方。提前感谢您的帮助！
这是我正在使用的Jquery
<script type="text/javascript">
jQuery(document).ready(function($){
/* prepend menu icon */
$('#top-menu-nav').prepend('<div id="menu-icon"></div>');
/* toggle nav */
$("#menu-icon&
浏览 2提问于2014-06-30得票数 0
回答已采纳
4回答
我的网站是
我有一个简单的sticky.js，它可以修复滚动条上的导航条，但是导航栏下面的内容会跳到导航栏下面。知道怎么解决这个问题吗？
jQuery(function(){
var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
jQuery(document).bind('ready scroll',function() {
var docScroll = jQuery(document).scrollTop();
if(docScroll >= menuOffset) {
浏览 7提问于2014-07-25得票数 1
回答已采纳
1回答
我有一个jQuery全页面插件的网站。我的移动导航打开，所以转换主窗口到大约80%的权利和拖着查看移动菜单。
(仅移动版本)
我点击了.section按钮..menu打开标题上的类，但是如果用户拖放或滚动到页面部分，完整的页面插件功能会扭曲窗口的视图。
我需要禁用与.section的任何交互，或者禁用与toggleClass的默认交互。
我试过：
e.preventDefault -这将禁用对.section div的单击到toggleClass菜单-打开
指针-事件:无-不起作用
但是用户仍然可以与右边的部分(白色div)进行交互。
我想让他们点击它来切换菜单
浏览 4提问于2017-05-23得票数 0
1回答
对于我当前的项目，我使用的是jQuery插件菜单。现在，我想将导航栏设置为总是在顶部。但它不起作用，因为Mmenu甚至已经因为全屏扩展而被修复了。
浏览 4提问于2015-08-19得票数 0
我终于能够将标题/导航区设置为滚动条菜单。我现在唯一的问题是，当我向下滚动到标题/导航区的过渡是困难的，而不是像这个网站的导航那样平滑的淡入淡出：
它们的淡出甚至是平滑和漂亮的。我需要在下面的代码中添加什么代码片段(我不是一个程序员。所以，如果代码看起来一团糟--对不起，这就是我到目前为止要做的事情)：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).scroll(function(e){
浏览 0提问于2013-01-13得票数 0
回答已采纳
1回答
我正在使用以下jQuery： jQuery(document).click(function (event) {
var clickover = jQuery(event.target);
var _opened = jQuery(".navbar-collapse2").hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle
浏览 34提问于2020-07-07得票数 0
1回答
我有一个左侧固定导航菜单，它本质上是精简的。当它悬停时，它会扩展到全宽。
我已经决定在导航中放置一个切换开关，这样用户就可以选择保持导航菜单的全宽，而不必将鼠标悬停在固定的导航上。
简而言之，我希望导航菜单在悬停时展开到全宽，但当切换开关被单击时，我希望它保持全宽展开。
问题出在我的jQuery设置中，导航菜单在悬停时仍然会继续展开和压缩，但切换开关在单击时不会使导航菜单保持展开状态。
// Navigation Animation
$('.left').hover(function() {
$('.left').addClass('show&#
浏览 0提问于2018-03-11得票数 0
我们怎么能有固定的导航条，具有相同的行为，像这样的网站，，也与两种不同类型的菜单项。
例如，在上面的网站上，他们有故事，如何工作，博客和登录在顶部菜单和当你滚动在固定菜单中，“登录”被替换为“启动你的项目”按钮。
我们如何在引导3中使用css/jquery实现这一点？
我会感谢你的帮助。
谢谢。
浏览 3提问于2014-03-03得票数 1
回答已采纳
我有一个附加到固定导航栏的下拉菜单。类似于目前的Twitter设计所使用的。
下面是这个问题的链接： (它已经被更新，比以前的迭代简单得多)
我使用jQuery来使菜单出现/消失，它工作得很好。菜单在工具栏上方而不是工具栏下方显示动画。
我不明白为什么z-index没有覆盖下拉菜单中通常的可视化堆栈？
下面是相关的CSS属性
#top-stuff{
position:fixed;
top:0;
left:0;
z-index:12;
width:100%;
}
.dropdown {
position: absolute;
z-inde
浏览 2提问于2011-05-26得票数 1
回答已采纳
有没有可能用定制的导航菜单替换Wordpress的默认菜单，这样就不需要在每次单击选项卡时重新加载页面？我知道基于jquery的导航菜单很容易构建，但我想知道它如何适应Wordpress。
浏览 1提问于2011-07-14得票数 0
我在一个网站上工作，它使用纯CSS和悬停状态来建立下拉菜单。问题是导航项目的数量如此之多，以至于用户必须滚动才能在较小的笔记本电脑上看到它。但是发生的是菜单在到达底部之前就消失了，就好像发生了鼠标输出事件一样。有没有一种方法可以在不将菜单转换为javascript/jQuery的情况下防止这种情况发生？
浏览 0提问于2016-02-23得票数 0
2回答
我有一个移动网站，它有一个导航菜单，显示在右上角的固定位置按钮上。这个菜单也是固定的，所以菜单的顶部开始在按钮底部以下10 so。问题是，这个导航菜单可能比正在使用的设备的高度更长，当您尝试滚动时，它将滚动导航菜单后面的内容，因为它是固定的。有人能帮我绕开这件事吗？
浏览 2提问于2014-11-04得票数 1
回答已采纳
1回答
所使用的技术有C#、Asp.net MVC2.0、JQuery和CSS3.5、.NET。
我们有一个web应用程序和一个主导航菜单，它严重依赖于一些后端数据值的CSS和JQuery。
导航菜单是两层-顶层和子层，它将最终用户带到我们应用程序的不同区域。
其中一个要求是让我们导航到我们的合作伙伴网站，当客户导航到他们的网站时，客户应该得到与我们网站上看到的相同的导航菜单。
客户不应该知道他们除了URL之外还在合作伙伴网站上。合作伙伴网站使用的技术可以是非Microsoft堆栈。
在网站之间共享导航菜单的最佳方式是什么？
浏览 2提问于2014-04-30得票数 0
2回答
我在一个网站上有一个标题/导航栏，它有一个徽标，导航菜单和搜索框都在该顺序
所以徽标在左边，然后是导航菜单和右边的搜索框。
搜索框是使用position: relative;对齐的，问题是它相对于导航菜单的位置，导航菜单是搜索框之前的div。
这是一个问题，因为导航菜单可以有不同的大小，这取决于它显示的菜单项。
我需要一个可靠的方法来定位我的搜索框，有没有办法相对于某个Div而不仅仅是它前面的Div来定位Div？
在图像中，搜索框应该定位在侧边栏上，但就像我提到的，导航菜单可以有不同的长度，所以如果我将相对X定位在它之外，它将根据菜单的宽度而有所不同
浏览 3提问于2012-01-07得票数 0
回答已采纳
我在页面顶部的固定导航栏中使用twitter bootstrap下拉菜单。
这一切都很好，但我有下拉菜单项显示在其他页面元素后面，而不是在他们前面的问题。
如果页面上有任何带有position: relative的东西(比如jquery ui accordion或google图表)，那么下拉菜单就会显示在它后面。尝试更改dd菜单和导航栏的z-index，但没有任何不同。
让菜单位于其他内容之上的唯一方法是将内容更改为position: fixed;或z-index: -1; -but，这两种解决方案都会导致其他问题。
感谢你能给我的任何帮助。
我认为这可能是我误解的CSS定位的一些标准问题，所
浏览 1提问于2012-12-17得票数 59
1回答
我正在使用jquery来制作导航菜单的动画，我还使用了网站上的jquery滑块(链接如下)。如果在滑块过渡时将鼠标悬停在导航菜单上的第一个li上，它会在徽标上产生非常奇怪的抖动效果。只有在滑块转换时才会发生这种情况。两个脚本同时执行会不会有问题？我是jquery/javascript的新手，如果这是一个愚蠢的问题，请原谅我。对如何修复它有什么想法吗？
谢谢!
浏览 1提问于2012-12-24得票数 2
回答已采纳
1回答
我已经使用menubar小部件创建了一个jQuery UI导航菜单。它的工作方式和我预期的一样，只是我希望它的行为稍有不同。正如您在这里看到的，子菜单展开并相对于所单击的链接定位。
我希望它展开并停留在导航栏的左侧，无论单击哪个链接，子菜单都将始终保持相同的宽度。就像这张图片。
我试着设置一个相对于容器的位置，并绝对定位子菜单，但我认为jQuery UI定位覆盖了这一点。任何建议都会很棒，干杯。
编辑:这需要用JS来完成，因为它必须是点击，而不是触发下拉框的悬停操作
浏览 1提问于2012-08-17得票数 0
回答已采纳
我正在使用示例页面Bootstrap导航栏固定顶部的地址：
在我的例子中，我延长了默认菜单的长度(即添加更多菜单项或更长的菜单项措辞)。当屏幕尺寸在768-990px之间时，导航栏分成两行(左侧部分在顶部，右侧部分在底部)。
当这种情况发生时，Joombotron部分的顶部被覆盖并在导航栏后面丢失(单击以查看下图)。
如何修正才能确保Jumbotron始终低于导航栏部分？
谢谢你，K
浏览 2提问于2016-10-31得票数 2
4回答
我最近一直在使用Twitter Bootstrap，我非常喜欢它。
我创建了一个固定在顶部的导航栏，里面是我的徽标，一个标题，几个链接，还有一个下拉列表，上面写着“跳转到：”。单击下拉菜单时，会出现一个菜单，其中有四个链接指向页面中的某个部分。所有的链接都起作用了。
我的问题是，因为每个部分的标题现在都放在我页面的顶部，我固定的导航栏会阻止它。有没有什么我可以阻止这种情况发生的方法？来点jQuery之类的？
这是我的网站：。提前谢谢。
浏览 1提问于2014-02-04得票数 2
1回答
滚动导航
、、
我对JQuery是个新手，这个问题以前肯定被问过上百万次了。我的网站将4页变成一页。我想保留我的导航菜单，就像它在这个网站上，在底部的第一页和顶部的其余页面。任何帮助都将不胜感激。非常感谢。
浏览 0提问于2012-10-24得票数 1
我尝试在下拉菜单中使用jquery幻灯片效果(正如本教程所示： --这似乎是制作jquery下拉菜单的一种非常常见的方法)，但是每当我将鼠标悬停在列表项上时，子菜单就会向下推入它下面的div (我的主要内容)。我该如何解决这个问题呢？我想避免绝对地定位content div。谢谢!
浏览 0提问于2011-01-24得票数 2
回答已采纳
1回答
我正在学习Twitter Bootstrap 3，试图建立一个响应式的网站。我使用标准示例创建了一个导航栏。它在小屏幕和漂亮屏幕上的表现都很好，但有一种情况除外:缩放。当我缩小页面时，导航栏的大小增加，最右边的菜单项从屏幕上消失。我不能以任何方式平移或滚动它来再次查看它。
我可以完全禁用缩放功能。但是Bootstrap文档说，这并不总是最好的想法，理想情况下，我希望确保需要更大字体的人可以访问页面。我可以做些什么来确保导航栏可用于缩放？或者我还能做些什么来帮助那些需要更大字体的用户呢？
未缩放：
缩放并滚动到右侧文本滚动条，而不是导航栏，用户菜单消失
源代码
<!DOCTYP
浏览 3提问于2014-03-20得票数 2
2回答
防止固定页眉重叠内容
、、、
我被困在这个问题上，我有一个响应固定的标题，这是重叠的主要内容！
我正在使用内部/锚链接在同一个页面上。来自导航菜单/标题链接和 Jquery插件。我无法链接到不同的章节，没有标题重叠的第一个60 of的节。我一直试图将margin-top: 60px;添加到.container和..section类中，但没有成功。
我希望能够链接从导航菜单/标题链接和jQuery点导航，而不与60 to的标题重叠。
有关更多信息，请参见此！
浏览 1提问于2016-12-31得票数 0
回答已采纳
我正在进行一个项目，并被要求导航栏保持静态(例如，facebook)，而不是CSS固定位置，但是当我单击菜单中的某个项目来加载其内容时，只会刷新内容区域。
因此，我相信我将需要一个容器在页面的中心加载动态内容。现在，导航栏包含在我所有的aspx页面中，这些页面是相同的，并且该条在一页一页之间刷新。
我阅读了几篇文章/帖子，我想到的方法是将每个aspx封装到用户控件中，然后在从相应的菜单项调用时将其动态加载到我的主页内的div中，该菜单项基于本文：
我的一个页面使用jquery选项卡在父div中显示/隐藏多个子div内容，这意味着所有div内容都在一个页面中，但是现在我正在处理aspx页面上的
浏览 3提问于2013-02-02得票数 1
回答已采纳
我使用了一个标准的css垂直导航菜单，它使用":hover“来显示子菜单。菜单是使用标准的"ul“和"li”元素完成的。菜单位于页面的左侧，当您将鼠标悬停在菜单上时，它会弹出右侧的子菜单。
我的问题是，弹出的子菜单，有没有办法使其全屏高度？
更新
下面是一个非常简单的示例：
所有周围的html/css都被移除了，所以你能看到的只有菜单。
更新
我现在已经通过使用jQuery成功地做到了这一点。jQuery为：
$('ul > li > ul').css('height', $(window).height() + 'p
浏览 4提问于2012-08-29得票数 0
回答已采纳
1回答
在网站上有一个导航菜单，当我向下滚动我的鼠标按钮时，导航菜单也会下来。我只想用jQuery制作那种类型的导航菜单。你们能给我一些参考或教程吗?这样我就能做出这样的作品了。
顺便说一句，有任何方法可以建立一个外部导航菜单，如模板，以便我可以添加到任何我想要的菜单(使用jQuery)。
另外，我可以使用导航系统吗。使用spring框架的菜单？
谢谢你的预支。
浏览 1提问于2012-02-23得票数 0
1回答
我有一个导航菜单，这是冲突的角落横幅(图像)。但是，它会与导航菜单重叠。
下面是分辨率大于1024x768的图像：
下面是它在分辨率为1024x768 (或更低)的浏览器中的样子：
这是我的代码(用于角横幅和导航菜单)：
#cornerbanner {
background: url("../images/corner_banner.png") no-repeat;
display: block;
height: 117px;
width: 117px;
position: absolute;
top: 0;
浏览 2提问于2011-10-06得票数 1
回答已采纳
1回答
我修改过的模板的工作演示可以在下面的url中找到：
我一直无法确定是什么引起了固定导航菜单的恼人反弹。如果您向下滚动页面，则菜单应该向上移动，并在其顶部边框到达页面顶部时停止；然而，它实际上只是移动到页面的顶部，然后再回滚，造成了恼人的反弹。
我怎么才能摆脱这种反弹？我假设这可能是由于用于查询菜单位置的jQuery代码造成的。这就好像代码在事后修复了问题，而不是从一开始就阻止它发生。
我已经从原始模板中删除了标题，以便菜单最初出现在顶部；但是，当用户第一次向下滚动页面时，菜单会以类似的方式弹出，因此缺陷在原始模板中，而不是由于我所做的任何更改。
我已经在下面的url发布了修改过的模板，以防下
浏览 1提问于2017-06-19得票数 0
回答已采纳
2回答
当屏幕尺寸低于940px时，我必须更改什么才能使导航栏固定？我不想让它反应灵敏。如果你将浏览器窗口的大小调整到940px以下，你会看到scroolbar-x (底部滚动条)出现，但是当你向右滚动时，导航栏的位置仍然是固定的，并且一些菜单不会出现。
也许一些图片会解释我的问题。
浏览 3提问于2012-06-27得票数 4
回答已采纳
1回答
我已经创建了一个带有jquery悬停效果的导航。
导航仪工作，唯一的问题是当你把屏幕变宽或小于800px，然后按下红色框来显示切换导航仪。悬停菜单从全宽菜单中拾取jquery。
如何阻止jquery悬停菜单不显示主菜单的悬停状态。
/* MAIN MENU DROPDOWN
===================================*/
$("#toggle-nav").click(function () {
$("#nav").slideToggle('slow');
});
/* MAIN SETTINGS SHOW
浏览 3提问于2013-10-28得票数 1
1回答
我正在尝试创建一个浮动标题导航菜单和浮动页脚导航菜单，都是定制的。但是，我无法确定将它放在代码中的位置，这样它就不会滚动。
网站在这里，。当我向下滚动时，底部的灰色条形图应该保持在底部。正如你所看到的，它被某些东西粘住了，我不知道如何阻止这一切的发生。
我使用的主题是主题化在wordpress上。
<div class="footer_custom">
Footer Text/Code
</div>
.footer_custom {
background-color: #d7d7d7;
position: absolute;
浏览 4提问于2015-07-31得票数 0
回答已采纳
1回答
我有一个相当简单的主页，目前包含一个带两个下拉菜单的导航栏。其中一个菜单包含大量条目，但它不允许我滚动到列表的末尾。
我创建了一个固定顶部的导航条，一个导航条品牌，一个家庭链接和两个下拉菜单。其中一个菜单是短的，只有2个项目，另一个包含大约32项。
一切呈现良好，但当我打开较大的两个菜单，它显示大部分的项目，但不允许我滚动到其余的。
我希望导航条能固定在页面的顶部，而我可以一直滚动到大菜单的底部。
浏览 7提问于2022-09-09得票数 0
回答已采纳
我正在用wordpress中的自定义主题来构建我的主页。
我把我的标志放在中间的页面，我需要它是固定的，当我滚动到它。我是用以下代码实现的：
var stickyLogo = jQuery('.logo_centered').offset().top;
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > stickyLogo) {
jQuery('.logo_centered').addClass('fixato');
浏览 1提问于2018-08-03得票数 0
回答已采纳
1回答
请原谅我问了这么一个一般性的问题。我正在创建一个与果园CMS网站。网站的设计和互动性是至关重要的要求。我有一个导航菜单，有一个固定的大小(900 px宽)，但应该能够调整尽可能多的菜单项(我手动修改css)。我使用了一些jQuery来为菜单创建一些鼠标、悬停等动画。问题是css和jQuery参数是硬编码的。因此，如果用户要更改以添加一个新的菜单项，他们需要预先知道菜单项和子项的数量，因此对于普通用户来说，对其进行自定义并不容易，这就是CMS的全部要点。保持此菜单交互(与jQuery动画)的最佳方式是什么，这样用户就可以向该菜单中添加内容页(就像他们在果园中使用默认导航菜单那样)，以及对用户友好
浏览 3提问于2012-08-13得票数 1
回答已采纳
1回答
我有一个导航菜单，我想使用熔岩灯jQuery插件。在这个小提琴例子中，熔岩灯插件完美地工作：，但在我的菜单上：不工作：(有人能帮我做这个，因为我卡住了吗？)
我希望熔岩灯只运行在主ul从我的菜单，而不是儿童UL。
谢谢！
浏览 4提问于2012-07-18得票数 0
回答已采纳
我有一个离开画布导航菜单(类名，是通过悬停，使用jQuery在我的Wordpress网站上启用。它应该是在页面加载时不可见的。
对于移动版本，我希望通过单击菜单图标来激活相同的导航菜单(这是我给出的两个类，按以下顺序:移动导航切换显示-导航-移动)。切换方法似乎只适用于垂直切换。我的解决方案是在单击而不是悬停时复制相同的动画，方法是使用图标上的toggleClass方法在一个类名之间切换，该类名打开菜单导航(show- nav -mobile)并使用以下代码关闭它(隐藏-导航-移动)：
jQuery(".show-nav-mobile").click(function(){
浏览 4提问于2022-09-21得票数 0
回答已采纳
1回答
我一直在我的本地机器上开发一个网站，它的顶部有一个固定的导航菜单。当浏览器放大时，我使用媒体查询来压缩标题中对象之间的空间，以便所有对象都能显示在屏幕上，这在桌面上效果很好。
然而，当我在移动设备(Android Galaxy S3)上测试时，我注意到这些媒体查询不会在收缩缩放时触发，导致图标超出了移动视窗的限制。
我在网上找不到关于这种行为的很好的文档。我看到它偶尔提到，这是设计的行为，而收缩缩放就像一个‘放大镜’，不应该激活媒体查询。我正在考虑完全关闭手机上的导航菜单。有没有一种原生的方法来解决这个问题，或者这需要一个javascript解决方案？
这里有两张照片。第一个是不缩放的导航菜单
浏览 2提问于2015-11-01得票数 3
我刚接触Bootstrap (和react-bootstrap)，所以我遇到了一些麻烦。
因此，我现在有一个透明的导航栏，并使用事件侦听器对其进行设置，以便当您向下滚动时，导航栏的背景会出现，并且导航栏会在您向下滚动时停留在屏幕顶部。这只在我有<Navbar fixed="top">的时候有效，在我切换到一个较小的视窗之前，这是很好的，在那里我的导航栏变成了一个汉堡菜单。如果我有fixed="top"，当你打开汉堡菜单时，它会扩展到我的页面下面的任何文本上，而不是按下它并为导航栏链接腾出空间。
如果我从导航栏中删除fixed="top"
浏览 6提问于2019-07-09得票数 0
1回答
(TL;DR)
是否可以让jQuery/Javascript监视特定类的元素；如果存在该类，则执行一个函数。如果类不存在，则执行不同的函数。
(全部)
我们有一个使用超级菜单的WordPress主题。菜单被配置为出现在标题下，而不是在标题下面。因此，某些元素很难看到，因此我们创建了一个OnClick事件，当单击主导航链接时，该事件将更改各种标头元素的颜色：
jQuery(document).ready(function() {
jQuery('#main-menu nav ul').click(function(){
jQuery('.cont
浏览 7提问于2022-08-22得票数 0
1回答
我正在尝试构建一个响应式的导航菜单，就像上的菜单一样。(请参阅my JSFiddle /。)在较小的屏幕宽度上，当用户单击“菜单”链接时，主页内容滑向右侧，滑出视区，显示下面的导航菜单。为此，我将.show-nav类应用于此事件的html元素，这将在#main中重新定位内容。#main有一个1秒的过渡CSS规则，可以让移动更流畅。
到目前为止，在Chrome中，当你打开导航时，这似乎可以正常工作。但当您再次折叠它时，内容区域中的文本会自动重新排列。谁能解释一下奥巴马的人是如何阻止这种情况发生的？我想让内容像一个静态对象一样反复滑动。
浏览 1提问于2012-07-13得票数 0
回答已采纳
1回答
我有一个很小且非常简单的jQuery代码段，它将一个使用position: fixed的类应用到页面的导航元素中，这样导航就会变得粘稠，从而在用户向下滚动页面时与用户呆在一起。
我是在商业平台上建立这个平台的。问题是，当position: fixed应用于导航元素时，该属性似乎无法正常工作。看起来这个位置正在变得“固定”，但是它只固定在它包含的标题区域内，我不知道为什么会发生这种情况。如果您想自己看这个，请看下面的内容：
您可以看到，在稍微滚动之后，导航元素就会变得固定，但不像它应该的那样正确。
请参阅我的代码如下：
CSS
.fixed {
top: 0 !important;
浏览 4提问于2016-10-26得票数 1
回答已采纳
我正在创建一个菜单导航栏(主菜单)，所有的子菜单都将位于左侧。由于主菜单栏是在_Layout.cshtml中调用/构建的，如果主菜单栏将驻留在_Layout.cshtml上，并且在主项的每一个单击操作上，我如何重建/刷新子菜单？
<div>
@{ Html.RenderAction("Menu", "Home"); }
</div>
<div class="leftmenu">
@{ Html.RenderAction("SubMenu",
浏览 0提问于2017-05-06得票数 0
回答已采纳
我试图有一个圆形的徽标放置在一个引导导航菜单的左侧，并使菜单与行的底部对齐，但它总是希望与顶部对齐。我是用jade写的，但希望其他语言的人至少能理解它是如何工作的(缩进表示嵌套，而不是结束标记)。有没有一种方法可以很容易地通过css或使用bootstrap中的网格系统来完成这项工作？
doctype 5
html
head
title= title
link(rel='stylesheet', href='/css/bootstrap.min.css')
link(rel='stylesheet', href
浏览 0提问于2013-02-27得票数 0
回答已采纳
3回答
我正在尝试使用Jquery在我的MVC应用程序中创建导航菜单。为此，我使用了。
然而，我想显示基于用户角色的菜单项，即包括asp成员授权逻辑，以便如果用户没有所需的角色，他看不到某些菜单项。
有没有人能建议如何继续。
谢谢
浏览 0提问于2012-07-19得票数 0
回答已采纳
我只想在单击导航栏的导航栏按钮显示菜单项时才调用JQuery函数。
当按钮隐藏菜单项时，我不想调用JQuery函数。
我该怎么做？
浏览 3提问于2015-08-21得票数 0
回答已采纳
我想实现这种菜单导航()，当你点击汉堡包图标它打开菜单导航。我不确定这是否是模式，有人知道如何为这种菜单导航创建html、css和jquery吗？
浏览 2提问于2017-03-16得票数 1
回答已采纳
2回答
我正在做一个单一的网页网站，在顶部有一个固定的标题，有导航菜单。导航菜单链接到页面上的div。
问题是，当您单击其中一个链接时，标题将覆盖该节标题。我想知道如何才能解决这个问题，而不需要在每个div顶部添加一吨填充。
这是页面：
浏览 2提问于2014-02-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
