【问题标题】:Shrink Sticky Header Logo on Mobile Scroll缩小移动滚动上的粘滞标题徽标
【发布时间】:2020-11-04 21:05:52
【问题描述】:

我一直在想办法让我们仅在我们的 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 html css scroll header


    【解决方案1】:

    我不知道您的确切设置,但听起来您需要在 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 过渡以使其获得更好的体验,还可以检测用户是向上还是向下滚动,并相应地缩小/放大徽标,而不是在用户到达最高层。

    【讨论】:

    • 嘿,约翰尼,感谢您如此迅速的反应!我继续尝试实现 CSS 和 JS,但它似乎在移动版本上根本不起作用(看起来它可能只是稍微破坏了菜单功能)。有什么建议吗?
    • 听起来可能有什么干扰。你有没有运行控制台日志以确保这段代码正在运行?
    • 它不应该影响功能,除非你有其他可能干扰的东西正在运行,我们在这里所做的只是添加/删除类......如果不确切知道你的情况很难说
    • 哦,好吧,明白了。我在这里复制了我们的 JS 仅供参考,我不完全确定这里的内容可能会直接干扰此代码:codepen.io/nikki-s/pen/NWrBrry
    • 嗨 Nikki,哇,这是很多代码...如果不使用您的代码,我不可能知道,但是那里还有其他滚动事件侦听器吗?搜索时有很多关于滚动的引用,我认为可能还有其他处理滚动的函数可能会导致冲突。
    猜你喜欢
    • 1970-01-01
    • 2013-05-02
    • 2016-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多