дублирование функции внутри ее кода

Question

дублирование функции внутри ее кода

1

У меня есть следующая функция, которая применяет класс (header-hide/header-show) к div на основе пользовательского прокрутки.

$(document).ready(function($) {


      // adjust this number to select when your button appears on scroll-down
      var offset = 75,

        // bind with the button link
        $animation = $('header');

      // apply animation
      $(window).scroll(function() {
        ($(this).scrollTop() > offset) ? $animation.addClass('header-hide').removeClass("header-show"):
          $animation.addClass('header-show').removeClass("header-hide");
      });

.header-hide {
  opacity: 0;
  visibility: hidden;
}

.header-show {
  opacity: 1;
  visibility: visible;
}

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

  <div>
    <h3>header</h3>
    <h1>subHeader</h1>
  </div>

</header>

Я хочу сделать аналогичную вещь для другого div (нижний колонтитул/нижний колонтитул добавлен в нижний колонтитул) с другим смещением (300). Я хочу сделать это эффективно, поэтому я не хочу копировать и запускать копию функции и надеялся интегрировать ее в эту. но не может заставить его работать.

user3550879 28 окт. 2017, в 07:45

Источник

0

Так почему бы не проверить класс на конкретное имя class чтобы установить offset ? Если бы вы могли предоставить демоверсию JsFiddle, это было бы здорово, так как это даст мне и другим возможность работать.
NewToJS 28 окт. 2017, в 05:14
0

Присвойте определенный атрибут (например, on-scroll-offset-param = "class1, class2, offset") тем элементам, к которым вы хотите применить анимацию. И в окне прокрутки выберите все эти элементы с указанным атрибутом (on-scroll-offset-param). а затем выберите эти элементы и вызовите свою функцию со значениями атрибута вместо жестких кодов.
Shubhranshu 28 окт. 2017, в 05:19
0

Даже с вашим обновлением я не могу заставить работать header и вы сказали, что можете сделать это нормально, но хотите сделать то же самое для footer . Пожалуйста, создайте демо на JsFiddle, чтобы я мог видеть, как работает header и тогда я буду знать, с чем я работаю, чтобы он работал для нижнего колонтитула.
NewToJS 28 окт. 2017, в 05:55
0

Ну вот моя попытка jsfiddle: jsfiddle.net/qmkqejq8/1, но, как я уже говорил, я не могу заставить java работать
user3550879 28 окт. 2017, в 06:50

Показать ещё 2 комментария

Теги:

javascript

css

1 ответ

Ещё вопросы

Так почему бы не проверить класс на конкретное имя class чтобы установить offset ? Если бы вы могли предоставить демоверсию JsFiddle, это было бы здорово, так как это даст мне и другим возможность работать.
Присвойте определенный атрибут (например, on-scroll-offset-param = "class1, class2, offset") тем элементам, к которым вы хотите применить анимацию. И в окне прокрутки выберите все эти элементы с указанным атрибутом (on-scroll-offset-param). а затем выберите эти элементы и вызовите свою функцию со значениями атрибута вместо жестких кодов.
Даже с вашим обновлением я не могу заставить работать header и вы сказали, что можете сделать это нормально, но хотите сделать то же самое для footer . Пожалуйста, создайте демо на JsFiddle, чтобы я мог видеть, как работает header и тогда я буду знать, с чем я работаю, чтобы он работал для нижнего колонтитула.
Ну вот моя попытка jsfiddle: jsfiddle.net/qmkqejq8/1, но, как я уже говорил, я не могу заставить java работать

Maxwelll · Answer 1 · 2017-10-28T03-28-00.000Z

0

Напишите функцию, которая принимает 4 параметра - элемент, смещение, скрытый класс и класс show -

function reusuableAnimationFunc(elementName, offset, hideClass, showClass) {
  $animation = $(elementName);

  $(window).scroll(function(){
      ( $(this).scrollTop() > offset ) ? $animation.addClass(hideClass).removeClass(showClass):
      $animation.addClass(showClass).removeClass(hideClass);
  });
}

Maxwelll 28 окт. 2017, в 03:28

0

И откуда и когда эта функция должна быть вызвана?
Shubhranshu 28 окт. 2017, в 05:21
0

Есть 2 разных смещения (70 и 300) и классы для добавления / удаления (header-hide / header-show) и (footer-hide / footer-show), которые применяются к 2 различным элементам div (header и footer).
user3550879 28 окт. 2017, в 05:25
0

resuableAnimationFunc('header', 70, 'header-hide', 'header-show') И resuableAnimationFunc('footer', 300, 'footer-hide', 'footer-show')
Maxwelll 28 окт. 2017, в 05:27
0

о, хорошо, я неправильно понял ваш ответ. Я никогда не использовал ваш подход раньше, где в коде это идет?
user3550879 28 окт. 2017, в 05:29
0

Что ты конкретно имеешь ввиду? Помогает ли это stackoverflow.com/questions/3809862/…
Maxwelll 28 окт. 2017, в 05:37
0

Или более простым подходом было бы дать элементам data-offset данных набора data-offset и извлечь его для установки смещения. Если ОП желает дать рабочую демонстрацию функционирования прокрутки header я буду рад продолжить оттуда, но без демонстрации у меня будет очень мало работы, чтобы показать пример работы / функционирования.
NewToJS 28 окт. 2017, в 05:37
0

Я обновил свой вопрос, я испытываю трудности с получением Java в моей демоверсии. Но CSS / HTML просто. Также понял, что я вставил много кода (нижняя часть применяется к другой части)
user3550879 28 окт. 2017, в 05:46

Показать ещё 5 комментариев