我是编码新手,正在尝试为我的导航获取隐藏 Logo 并固定在顶部的功能,但无法使此代码正常工作。
function rekotex() {
//Do something under 767 px.
if (window.matchMedia) {
if(window.matchMedia("all and (max-width: 767px)").matches) {
// Hide logo.
jQuery("#logo-in-menu").hide();
}
} else { // Over 768px.
// See if page is scrolled, if so hide Logo.
var height = jQuery(window).scrollTop();
if(height <= 1){
jQuery("#logo-in-menu").show();
jQuery(".header").css({"height":230});
}
else if(height > 1) {
jQuery("#logo-in-menu").hide();
jQuery(".header").css({"height":130});
}
}
var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(rekotex, 100);
};
}
最佳答案
如果你想检查用户是否正在滚动你应该使用 $(window).scroll(function (event) 的页面,我想你想要的是这个:
$( document ).ready(function() {
if(window.matchMedia("all and (max-width: 767px)").matches) {
//Do something under 767 px.
// Hide logo.
jQuery("#logo-in-menu").hide();
} else {// Over 768px.
function rekotex() {
// See if page is scrolled, if so hide Logo.
var height = jQuery(window).scrollTop();
if(height <= 1){
jQuery("#logo-in-menu").show();
jQuery(".header").css({"height":230});
}
else if(height > 1) {
jQuery("#logo-in-menu").hide();
jQuery(".header").css({"height":130});
}
}
var doit;
$(window).scroll(function (event) {
clearTimeout(doit);
doit = setTimeout(rekotex, 100);
});
}
});
当页面加载时,检查宽度是否小于 768,如果是,则隐藏 Logo ,否则声明函数并在用户滚动时隐藏 Logo
这也只是一种预感,但 setTimeout 是否意味着淡出动画?如果是这样,您应该在.hide() 中写入时间。
关于javascript - 试图在滚动和窗口大小上隐藏 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37343041/