WedX - журнал о программировании и компьютерных науках

jquery — обновить функцию в $(window).resize с помощью headroom.js

Я пытаюсь запустить скрипт из headroom.js (https://wicky.nillia.ms/headroom.js/) для срабатывания, когда элемент достигает верхней части страницы. Положение элемента изменится при изменении размера окна.

Моя проблема: значение смещения функции не хочет работать с ним в $(window).resize. Переменная offset обновляет свое значение, но функция не использует его после того, как оно было определено один раз.

Вот мой код: https://jsfiddle.net/kh4jv748/7/

JQuery:

    //https://wicky.nillia.ms/headroom.js/ is already called 


    function updateViewportDimensions() {
        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        return { width:x,height:y };
    }
    // setting the viewport width
    var viewport = updateViewportDimensions();





    $(document).ready(function() {


    // initiate the headroom plugin to change nav bar behaviour


    function headroom (Offset){
        if( typeof Offset === "undefined" )  var Offset = 50; 
        var $offset = Offset;
        console.log('Vertical offset position from "trigger"', Offset);
        console.log('function headroom initiated');

        $(".top-menu").headroom({
          "offset": $offset,
          "tolerance": {
            "up" : "12", //tolerance scroll back 
            "down" : "0" // tolerance scroll 
            },
          "classes": {
            "initial": "animated",
            "pinned": "slideDown",
            "unpinned": "slideUp",
            "top" : "headroom--top",
            "notTop" : "headroom--not-top"
          }
        });
    };

    headroom();

    $(window).resize(function () {

        var home = $('body').hasClass('home');

        // if we're on the home page, we wait the set amount (in function above) then fire the function
        if( home ) { setTimeout( function() {

        // update the viewport, in case the window size has changed
        viewport = updateViewportDimensions();

          // if we're below 768 fire this off
          if( viewport.width < 768 ) {
            console.log('Home page < 768.');
            var Offset = 0;

          } else {
            // otherwise, let's do this instead
            console.log('Home page > 768');
            var Offset = $("#trigger").offset();
            var Offset = Offset.top
          }

          headroom(Offset);

        }, 2000, "headroom"); }

        else{ setTimeout( function() {
            console.log('Not on home page resized');

            viewport = updateViewportDimensions();

                if( viewport.width < 768 ) {
                console.log('Home page < 768.');
                var Offset = 0;
                console.log(Offset);

              } else {
                // otherwise, let's do this instead
                console.log('Home page > 768');
                var Offset = 500;
                console.log(Offset);
              }

              headroom(Offset);

            }, 2000, "headroom");

        };

    });


    });

Ответы:


1
.headroom('destroy').removeData('headroom') 

чтобы перезапустить функцию и запустить новую с новым значением

$(window).resize(function () {

// if we're on the home page, we wait the set amount (in function above) then fire the function
if( is_home ) { waitForFinalEvent( function() {

// update the viewport, in case the window size has changed
viewport = updateViewportDimensions();

  // if we're above or equal to 768 fire this off
  if( viewport.width < 768 ) {
    //console.log('Home page < 768.');
    var Offset = 0;

  } else {
    // otherwise, let's do this instead
    if ($('html #slider-pro-1 .quote').length) { var Offset = $(".widget_image-bubbles-widget").offset();
    var Offset = Offset.top - 80; }
    else { var Offset = 500; }
  }
  $(".header").headroom('destroy').removeData('headroom');
  headroom(Offset);

}, 1000, "your-function-identifier-string"); }

else{ waitForFinalEvent( function() {
    //console.log('Not on home page resized');

    viewport = updateViewportDimensions();

        if( viewport.width < 768 ) {
        var Offset = 0;

      } else {
        // otherwise, let's do this instead
        var Offset = 500;
      }
      $(".header").headroom('destroy').removeData('headroom');
      headroom(Offset);

    }, 1000, "your-function-identifier-string");

};

});
06.08.2015
Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


Для любых предложений по сайту: [email protected]