繁体   English   中英

jQuery 无法在滚动超过 1vh 后显示导航图标

jQuery isn't working to make navigation icons appear after scrolling past 1vh

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在使用 WordPress 的 Web 开发环境中工作。 我们使用的主题是 ThemeCo 的 Pro。

我仍在学习 javascript(所以如果我真的很远,请原谅我),并且我正在尝试使用 jQuery 编写一段代码,该代码将允许在滚动页面 1vh 后出现一个元素。 谁能帮我理解为什么这不起作用? 我不知道这是我的代码,还是我的主题可能不允许。 主题本身在前端使用 jQuery,但有一个我可以编辑的 javascript 文件,但在大多数情况下,前端编辑器对于代码非常可靠。

我正在使用这个问题中的部分来帮助我编写它,以及引用jQuery 库

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var minH = $(window).height() * 1;

  if (scroll >= minH) {
    $("#circle-menu").fadeTo(500, 1);
  } 
  else {
    $("#circle-menu").fadeTo(500, 0);
  }
});
1 个回复

为了确保我理解你想要做什么,我会快速重申你的代码的作用:基本上,minH 应该是 1vh,如果滚动 >= minH,你希望 #circle-menu 淡入.

话虽如此,我认为我们必须看看上面代码的几个潜在问题:

  1. 1vh 实际上只是视口高度的 1/100,可以计算为:
// this is 1vh, which is what you're going for
$(window).height() / 100

与之相反:

// this is 100vh
$(window).height() * 1
  1. 第二个是你正在使用fadeTo。 FadeIn/fadeOut 和fadeTo 之间的区别在于fadeTo 不影响元素的显示属性。 它只影响元素的不透明度属性。 这意味着如果菜单显示属性的主题默认值设置为“none”,fadeTo 不会使其淡入视线。 为了解决这个问题,在我看来,最好使用fadeIn 和fadeOut 代替,特别是因为您似乎并没有试图控制不同级别的不透明度(这正是fadeTo 真正需要的)。

我制作了一个快速代码片段来演示上述修复。

 $(window).scroll(function() { var scroll = $(window).scrollTop(); var vh = $(window).height() / 100; var minH = vh; if (scroll >= minH) { $("#circle-menu").fadeIn(500); } else { $("#circle-menu").fadeOut(500); } });
 p { margin-top: 10vh; height: 150vh; border: 2px solid #666; } #circle-menu { font-family: 'Segoe UI', verdana, sans-serif; font-size: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 50px; box-shadow: 1px 2px 3px rgba(50,50,50,0.1); z-index: 1; display: none; background-color: steelblue; color: white; padding-left: 20px; padding-top: 10px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="circle-menu">Menu</div> <p></p>

1 尝试使用JQuery突出显示当前的导航图标

我试图弄清楚如何突出显示网站上的当前导航图标。 除了博客部分之外,它变得更加复杂,所有其他导航链接都转到同一页面上的不同部分。 我希望主页图标在所有情况下都突出显示,除非用户在我的博客部分中。 我使用CSS将图标的不透明度设置为0.5,并突出显示该图标,并使用JQuery将类的不透明度更改 ...

2012-09-26 13:10:07 2 259   jquery
2 导航图标显示得太快

我正在尝试创建一个侧边栏菜单,该菜单栏在我单击汉堡菜单时出现,而在我单击关闭按钮时消失。 问题是,当我单击关闭按钮时,汉堡包按钮会在侧边栏菜单完全滑出之前出现,并且覆盖淡出的不透明性太快,我更改了覆盖的过渡时间,但未更改任何演示 script.js style.css ...

3 底部导航图标未显示

在 nativescript vue 应用上,我手动添加了一个底部导航,这里是模板的一部分: &lt;StackLayout&gt; &lt;BottomNavigation selectedIndex="0"&gt; &lt;TabS ...

4 离子显示菜单导航图标

我是Ionic的初学者,试图在用户单击按钮时显示侧面菜单页面。 相反,我仍然得到的是后退按钮。 这是我的代码: //菜单.html //app.html 我究竟做错了什么? ...

2017-10-06 18:32:04 2 554   ionic2
5 导航图标未显示在移动版本上?

因此,我修改了css元素以添加背景图像,但到目前为止,在移动设备上未成功显示导航图标。 请协助我在Link的响应式设计视图中调试代码,并告诉我什么有效。 感谢您的时间。 移动CSS下面 ...

6 显示导航图标而未实现navigationDrawer

我正在使用自定义的导航抽屉(或类似的东西),它不会扩展默认的NavigationDrawer。 因此,它不会自动在ActionBar的左上方显示导航按钮。 我想实现NavigationDrawer通常附带的功能。 我尝试了很多事情,例如: 要么: 要么: 但是我似乎 ...

7 滚动时将标题/导航转换为导航图标

我想创建一个导航,将滚动条上的导航栏/导航栏最小化为3个导航栏。 我做了一些研究,以找出页面上的页面滚动,但是我不确定如何将导航从页面顶部的内联更改为navicon中最右边的块级链接。 有人可以解释如何做到这一点。 我会做两个导航并隐藏一个吗? 这是默认状态下导航的当前js小提琴ht ...

8 更改导航图标

我的页面在导航下方: 我已经成功地添加active类的a时,在给定的URL元素a元素与下面的代码的浏览器中打开: 现在我想知道如何更改i元素图标类? 假设网址已打开,我想将图标类从fa-li fa fa-folder-o更改为fa-li fa fa-folder-open-o ...

9 引导导航图标

我使用自举程序进行编码,并且具有响应性的左侧导航。 看起来像: 当屏幕变得太小时,如何在顶部添加单击下拉图标? 我怎样才能做到这一点? ...

10 悬停的导航图标

我正在尝试制作一个图标导航栏,该图标在鼠标悬停时也徘徊相同的颜色,我将图标定位得有点偏,但同时我无法将其向右推或消失。 主要目标是将图标放在a href的左侧,右侧填充约3像素,这样就不会碰到文本,并且在导航菜单上,图标悬停与每个导航项的文本相同的颜色。 HTML CSS: ...

2017-07-20 06:51:11 2 59   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM