duplicating a function inside its code

Question

I have the following function which applies a class (header-hide/header-show) to a div based on user scroll.

$(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>

I want to do a similar thing to a different div (footer-show/footer-hide added to 'footer'), with a different offset (300). I want to do this efficiently so I don't want to copy and run a copy of the function and was hoping to integrate it into this one. but can't get it to work.

So why not check the class for a specific `class` name to set the `offset`? If you could provide a [**JsFiddle Demo**](http://jsfiddle.net/) that would be great as it will give myself and others something to work with. — NewToJS, Oct 28 '17 at 05:14
Give a specific attribute (e.g on-scroll-offset-param="class1, class2, offset" ) to those element which you want to apply animation to. And on window scroll select all those elements with the specified attribute ( on-scroll-offset-param ). and then select these elements and call your function with the attribute values instead of hard codes. — Shubhranshu, Oct 28 '17 at 05:19
Even with your update I cannot seem to get the `header` functioning and you have said you can make that work fine but wish to do the same for the `footer`. Please create a demo on **JsFiddle** so I can see the `header` working and then I will know what I am working with for it to function for the footer. — NewToJS, Oct 28 '17 at 05:55
Well here's my jsfiddle attempt http://jsfiddle.net/qmkqejq8/1/ but as I mentioned I can't get the java to work — user3550879, Oct 28 '17 at 06:50

Maxwelll · Answer 1 · 2017-10-28T05:37:22.490

0

Write a function that takes 4 params - element, offset, hide-class and show class -

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

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

edited Oct 28 '17 at 05:37

answered Oct 28 '17 at 05:18

Maxwelll

2,174
1
17
22

And from where and when this function should be called? – Shubhranshu Oct 28 '17 at 05:21
There are 2 different offsets ( 70 and 300) and classes to add/remove (header-hide/header-show) and (footer-hide/footer-show) which apply to 2 different divs (header and footer). – user3550879 Oct 28 '17 at 05:25
`resuableAnimationFunc('header', 70, 'header-hide', 'header-show')` AND `resuableAnimationFunc('footer', 300, 'footer-hide', 'footer-show')` – Maxwelll Oct 28 '17 at 05:27
oh ok, i misunderstood your response. I never used your approach before, where in the code does it go? – user3550879 Oct 28 '17 at 05:29
What do you mean exactly? Does this help https://stackoverflow.com/questions/3809862/can-we-call-the-function-written-in-one-javascript-in-another-js-file – Maxwelll Oct 28 '17 at 05:37
Or a more simple approach would be to give the elements a dataset `data-offset` and retrieve that to set the offset. If the OP is willing to give a working demo of the `header` scroll functioning I will be happy to expand from there but without a demo I have very little to work with to show a working/functioning example. – NewToJS Oct 28 '17 at 05:37
I've updated my question, I am having a hard time getting the java in my demo working. But the css/html is simple. Also realized I pasted to much code (the bottom part applied to a different part) – user3550879 Oct 28 '17 at 05:46

duplicating a function inside its code

1 Answers1