[英]Shrink Sticky Header Logo on Mobile Scroll
我一直在想办法让我们只在我们的 Shopify 网站的移动版本上应用的粘性标题,当您向下滚动时缩小标题徽标。 然后在滚动回最顶部时将标题徽标调整为原始大小。 当然,如果这缩小了移动滚动上的整个标题大小,则有效!
这是最初使用的,但是当一直向上滚动时,徽标不会正确地调整到它的原始大小。 相反,当访问移动网站上的不同页面时,它会奇怪地变小:
$(window).scroll(function(){
if ($(this).scrollTop() > 10){
$('.site-header__logo-image img').addClass("manage_width");
}
else{
//back to default styles
$('.site-header__logo-image img').removeClass("manage_width");
}
});
我尝试过 JS、CSS 和 HTML 的变体,但到目前为止似乎没有任何效果。 如果有人有我们可以应用于移动站点的代码,我将不胜感激! 谢谢!!
我不知道您的确切设置,但听起来您需要在 javascript 中添加一个事件侦听器来检测用户何时滚动。
要更改徽标的大小,您可以在滚动时为其添加一个新类。
您还必须检测用户何时滚动到顶部,以便将徽标更改回其原始大小。
代码应如下所示:
CSS
.logo {
width: 200px;
height: 100px;
}
.logo--small {
width: 100px;
height: 50px;
}
JS
// get logo
var logo = document.getElementById('logo');
// listen for scroll
window.addEventListener("scroll", function() {
// add small size class
logo.classList.add('logo--small');
// if user is at top of screen and has the small class, then remove it
if (window.scrollTop == 0 && logo.classList.contains('logo--small')) {
logo.classList.remove('logo--small');
}
});
您当然可以对类应用 css 过渡以使其获得更好的体验,并且还可以检测用户是否正在向上或向下滚动,并相应地缩小/增大徽标,而不是在用户到达时简单地调整大小最顶级的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.