时间戳

首页 > 解决方案 > 滚动后更改标题颜色 - 滚动移动问题

javascript - 滚动后更改标题颜色 - 滚动移动问题

问题描述

我的代码在桌面版本上完美运行，但在移动设备上不起作用，我不明白为什么。我也尝试在移动宽度上停用脚本，但它也不起作用。

if(window.matchMedia("(min-width: 768px)")) {

  $(function () {
    $(document).scroll(function () {
      var $header = $(".header");
      $header.toggleClass('scrolling-active', $(this).scrollTop() > $header.height());
    });
  
    $(document).scroll(function () {
      var $logo = $(".logo");
      $logo.toggleClass('scrolling-logo', $(this).scrollTop() > $logo.height());
    });

    $(document).scroll(function () {
      var $menu = $(".menu");
      $menu.toggleClass('scrolling-menu', $(this).scrollTop() > $menu.height());
    });
    
  });

这是该问题的视频（我在移动设备上也遇到了 AOS 动画问题，我正在解决这个问题）。 https://youtu.be/sA5Z0yOvZ_I

标签： javascriptjquery

解决方案

您的第一行代码实际上包含min-width: 768pxif 语句中的内容。因此， if 不会在移动设备上运行。

删除 if 语句，使其适用于他们两个 -

$(function () {
    $(document).scroll(function () {
      var $header = $(".header");
      $header.toggleClass('scrolling-active', $(this).scrollTop() > $header.height());
    });
  
    $(document).scroll(function () {
      var $logo = $(".logo");
      $logo.toggleClass('scrolling-logo', $(this).scrollTop() > $logo.height());
    });

    $(document).scroll(function () {
      var $menu = $(".menu");
      $menu.toggleClass('scrolling-menu', $(this).scrollTop() > $menu.height());
    });

min-width表示窗口的最小宽度应为 768px。手机并非如此。当开发人员使网站具有响应性时，他们不使用min-width，他们使用max-width（对于您的情况（768px））。

推荐阅读