如何使两个不同的函数在窗口大小调整上工作

时间:2016-04-16 08:39:50

标签: javascript jquery fixed sticky window-resize

我想要制作一个粘性横幅,当它滚动时会固定在顶部,而在页面末尾则不粘。文档高度取决于图像,这就是我使用窗口加载事件的原因。我有以下代码:

  function saleBanner() {
    $(window).bind("load", function() {
      // Make sale banner fixed-at-top
      var s = $('.sale-container');
      var pos = s.offset();
      var maxTop = $(document).outerHeight() - 828 - s.outerHeight(); // 828 is the total height of site footer and sign up form

      function fixedBanner() {
        var currentTop = $(window).scrollTop();
        if (currentTop >= pos.top && currentTop < maxTop) {
          s.attr("style", ""); //kill absolute positioning
          s.addClass('fixed-at-top'); //stick it
        } else if (currentTop >= maxTop) {
          s.removeClass('fixed-at-top'); //un-stick
          s.css({bottom: 0}); //set sticker right above the footer
        } else {
          s.removeClass('fixed-at-top'); //top of page
        }
      }
      $(window).scroll(fixedBanner);
    });
  }

  saleBanner();

我想让这个功能也适用于窗口调整大小。所以我添加了以下代码:

  function resizeBanner() {
    var viewportWidth = $(window).width();
    if (viewportWidth > 767) {
      saleBanner();
    }
  }

我还有一个用于移动菜单的函数resizeWindow,我还需要处理窗口大小调整。因此,当我将这两个函数放在一起时,它们不起作用(尽管它们在窗口上单独调整大小):

  $(window).resize(function(e) {
    resizeWindow(e);
    resizeBanner(e);
  });

我的错误在哪里?如何在窗口大小调整时使两个函数都起作用?

更新:以下是resizeWindow功能的完整代码。它相当长,但可能会对答案有所帮助。

  // Mobile menu
  var MQM = 768;
  var viewportWidth = $(window).width();

  function navSlide() {
    var headerHeight = $('.cd-header').height();
    $(window).on('scroll', {previousTop: 0}, function () {
      var currentTop = $(window).scrollTop();
      //check if user is scrolling up
      if (currentTop < this.previousTop ) {
        //if scrolling up...
        if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
          $('.cd-header').addClass('is-visible');
        } else {
          $('.cd-header').removeClass('is-visible is-fixed');
        }
      } else {
        //if scrolling down...
        if(!$('.cd-header').hasClass('menu-is-open')) {
          $('.cd-header').removeClass('is-visible');
        }
        if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
      }
      this.previousTop = currentTop;
    });
  }

  // Primary navigation slide-in effect on load
  if(viewportWidth < MQM) {
    navSlide();
  }

  function addOverflow() {
    $('html').addClass('overflow-hidden');
    $('body').addClass('overflow-hidden');
  }

  function removeOverflow() {
    $('html').removeClass('overflow-hidden');
    $('body').removeClass('overflow-hidden');
  }

  function hideHeader() {
    $('.cd-header').removeClass('is-fixed is-visible');
  }

  function hideMenu() {
    $('.cd-header').removeClass('menu-is-open is-fixed is-visible');
    $('.cd-menu-icon').removeClass('is-clicked');
  }

  function resizeWindow() {
    var viewportWidth = $(window).width();
    $(window).off('scroll'); // unbind scroll event
    if (viewportWidth > 767) {
      if ($('.cd-primary-nav').hasClass('is-visible')) {
        if ($('.algolia__search-content').hasClass('algolia__search-content--active')) {
          hideMenu();
          $('.search-trigger').addClass('is-clicked');
          $('.search-header').addClass('is-fixed');
        } else {
          hideMenu();
          if (!$('.js-algolia__input').is(':focus')) {
            $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
              removeOverflow();
            });
            $('.search-trigger').removeClass('is-clicked');
            $('.search-header').removeClass('is-fixed');
          } else {
            $('.search-trigger').addClass('is-clicked');
            $('.search-header').addClass('is-fixed');
          }
        }
      } else {
        hideHeader();
      }
    } else {
      navSlide();
      if ($('.cd-primary-nav').hasClass('is-visible')) {
        $('.cd-header').addClass('menu-is-open');
        $('.cd-menu-icon').addClass('is-clicked');
        $('.search-trigger').removeClass('is-clicked');
        $('.search-header').removeClass('is-fixed');
      }
    }
  }

0 个答案:

没有答案