$(窗口).resize();没有按预期工作

时间:2015-09-03 21:36:53

标签: javascript jquery

我希望在大于768px的屏幕尺寸上使用一组功能,而在小于此尺寸的所有尺寸上使用另一套功能。我需要.resize(),以便我知道用户何时在横向和纵向视图之间转换平板电脑或手机。

如果我刷新页面,.resize()事件内部的代码可以正常工作,但就好像事件没有被触发一样。有什么想法吗?

<script>
jQuery(document).ready(function($){
    function mobileFilterMenu(){
        var screenTest = $(window).width();
        if (screenTest >= 769){
            $(window).on('scroll', function () {
                    var scrollTop     = $(window).scrollTop(),
                    elementOffset = $('.inventory-search > .col-md-9').offset().top,
                    distance      = (elementOffset - scrollTop);
                if(distance <= 0){
                    $('.filter-form').css('top', Math.abs(distance));
                }else{
                    $('.filter-form').css('top', 0);
                }
            });
        }else{
            var vHeight = $(window).height() - $('#switch').height() - $('#primary-menu-toggle').height();
            $('.filter-form').css('height', vHeight + 'px');
            vTextHeight = vHeight - 20;
            $('.wpv-filter-form').css('height', vTextHeight + 'px');
            objNegHeight = (vHeight * -1) + 50;
            $('.filter-form').css('top', objNegHeight + 'px');

            var i;
            $('#switch').click(function(){
                if (i === 0){
                    $('.filter-form').css('top', objNegHeight + 'px');
                    i++;
                }else{
                    $('.filter-form').css('top', '50px');
                    i = 0;
                }
            });
        }
    }
    mobileFilterMenu();
    $(window).resize(mobileFilterMenu());
});
</script>

2 个答案:

答案 0 :(得分:2)

只需更改代码的这一部分即可。这应该可以解决你的问题。

$(window).resize(mobileFilterMenu);

不要传递 mobileFilterMenu() ,而是传递 mobileFilterMenu

$ window.resize 中的参数应该具有 功能 而不是 函数调用

希望这能解决您的问题。

答案 1 :(得分:0)

您应该使用media queries根据视口尺寸而不是代码来应用CSS

  

媒体查询使我们能够创建响应式体验,其中   特定样式适用于小屏幕,大屏幕和   介于两者之间。媒体查询语法允许创建   可以根据设备特征应用的规则。

@media (query) {
  /* CSS Rules used when query matches */
}
  

虽然我们可以查询几个不同的项目,但使用的项目   最常用于响应式网页设计的是最小宽度,最大宽度,   最小高度和最大高度。

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#apply-media-queries-based-on-viewport-size