jQuery .load和.resize无法正常工作

Question

我有一个带有滚动功能的加载和调整大小功能，该功能应在992px以上的屏幕上的窗口滚动中显示一个固定的标题。

在低于992px的屏幕上，我使用静态放置的同一标题，问题是.load和.resize函数无法正常工作。

我希望功能像媒体查询一样保持一致，我不知道这是否可行，如果有人知道该怎么做，我将非常感激。

 $(window).on('load resize', function() { if($(window).width() > 992) { function header_fixed_scroll() { if ($(this).scrollTop() > 200) { $('.header-fixed').show(); } else { $('.header-fixed').hide(); } } $(document).ready( function () { header_fixed_scroll(); $(window).on('scroll', header_fixed_scroll); }); }; });

 body { height:1500px; } .header-fixed { position:fixed; top:0; width:100%; height:70px; background:red; display:none; } @media screen and (max-width:991px) { .header-fixed{ position:static; display:block; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="header-fixed"></div> </body>

Answer 1

尝试以下代码修复：

 function header_fixed_scroll() { if ($(this).scrollTop() > 200) { $('.header-fixed').show(); } else { $('.header-fixed').hide(); } } $(document).ready(function() { $(window).on('load resize scroll', function() { if ($(window).width() > 992) { header_fixed_scroll(); }; }); });

 body { height: 1500px; } .header-fixed { position: fixed; top: 0; width: 100%; height: 70px; background: red; display: none; } @media screen and (max-width:991px) { .header-fixed { position: static; display: block; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="header-fixed"></div> </body>

jQuery .load和.resize无法正常工作

问题描述

1 个解决方案

解决方案1
0 2017-10-14 04:58:04

jQuery .load和.resize无法正常工作

问题描述

1 个解决方案

解决方案1 0 2017-10-14 04:58:04

解决方案1
0 2017-10-14 04:58:04