-
我创建了一个函数，可以根据窗口滚动位置在导航中添加/删除类。 https://kmanadkat.github.io/navonscroll/
-
它可以在Chrome桌面和移动设备上运行，但在Firefox上失败了。令人惊讶的是，我在上面网站上提到的例子是在 Firefox 上工作，而不是主页。
-
我已经尝试了很多来找出错误，没有来自 window.onscroll 函数的控制台日志。我想将这个插件保留在纯香草 Javascript中，但我仍然尝试使用箭头符号查看它们是否修复，但它们不起作用。
- 一切都在chrome中工作，只是Firefox无法与window.onscroll相处，
-
我什至尝试了
window.addEventListener("scroll", function() {});，但它也不起作用，在我的网站以外的选项卡上，我可以使用开发人员工具进行 OnScrollEvents。 -
这是插件的完整代码：
function hide_on_scroll(obj) {
// Throw Error if input type is not object or navid is not passed
if(typeof(obj)!=="object" || obj.nav_id===undefined){
throw new TypeError("Argument must be an Object, also confirm NavId");
}
// Get Function Paramenters
var nav_id = obj.nav_id;
var nav_offset = !!obj.nav_offset ? obj.nav_offset : 200;
var nav_position = !!obj.nav_position ? obj.nav_position : 'top';
var hide_onscroll_mobile = !!obj.hide_onscroll_mobile ? true : false;
var mobile_width = !!obj.mobile_width ? obj.mobile_width : 576;
nav_position = nav_position.toLowerCase();
// Prepare Navbar
var navbar = document.getElementById(nav_id);
if(navbar==undefined){throw new TypeError("Recheck Passed Navigation Id"); }
var nav_height = navbar.offsetHeight;
var navClasses = document.createElement('style');
navClasses.type = 'text/css';
navClasses.innerHTML =
'.nav-scroll-up{-webkit-transform: translateY(-'+78+'px);-ms-transform: translateY(-'+78+'px);transform: translateY(-'+78+'px);}' +
'.nav-scroll-down{-webkit-transform: translateY('+78+'px);-ms-transform: translateY('+78+'px);transform: translateY('+78+'px);}' +
'.nav-scroll-fixed-'+ nav_position +'{position: fixed;'+ nav_position +': 0;right: 0;left: 0;z-index: 1000;}' +
'.nav-scroll-transition{will-change: transform; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);-o-transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);}';
document.getElementsByTagName('head')[0].appendChild(navClasses);
navbar.classList.add('nav-scroll-transition');
navbar.classList.add('nav-scroll-fixed-' + nav_position);
// Set Global Variables
var c=0;
var currentScrollTop = 0;
var scrollingClass = (nav_position==='top') ? 'nav-scroll-up' : 'nav-scroll-down';
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
// Get Current Viewport Width
window.onresize = function(){ width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);}
// Call Window OnScroll
window.onscroll = function() {
// disable Hide on scroll for mobile
if(hide_onscroll_mobile==false && width<=mobile_width){
if(navbar.classList.contains(scrollingClass)){ navbar.classList.remove(scrollingClass); }
}
// Hide On Scroll for all screen if (width > mobile_width or mobile_width==true)
else{
var a = window.scrollY;
currentScrollTop = a;
if (c < currentScrollTop && a > (2*nav_offset)) {
navbar.classList.add(scrollingClass);
}
else if (c > currentScrollTop && !(a <= nav_offset)) {
navbar.classList.remove(scrollingClass);
}
c = currentScrollTop;
}
};
}
- 我想如何从html调用它，上面的代码来自文件
navonscroll.js
<script src="navonscroll.js"></script>
<script>
hide_on_scroll({
nav_id: 'myscrolling_nav',
hide_onscroll_mobile : true,
nav_offset : 10
});
</script>
我希望有人可以帮助我直接在 git 上修复它并为这种开源插件做出贡献，或者堆栈溢出中的一些修复也会有所帮助。
这显然是一个CSS问题，所以这将是一个不完整的答案(这不是我的领域)，但似乎window.scroll事件根本没有在Firefox上触发，由于以下组合：
scroll-behavior: smooth;html元素上，height: 100vh;+overflow: auto;在body元素上。
如果从main.css文件中删除这些规则中的任何一个，则 JS 事件将再次触发。
拥有更多CSS专业知识的人可能会了解正在发生的事情以及调整这些规则的最合适方法，即使这对我来说似乎是一个Firefox错误。