Good plugin, but.. unable to unstick when reach the footer

[mkaizumi]

I was thinking how to unstick when sticker just reach the footer, I don't want the sticker is overlapping or get behind it and just slide it away.. anyone know how to unstick the sticker before is reach footer? thanks

[ao]

Wondering how to do this myself. Any thoughts?

[Arpsara]

@ao @mkaizumi Hi! In case you didn't figured it out, I managed to do it by doing something like this:

  # When scrolling
  $(window).scroll( () ->
    # Get window position
    # console.log $(window).scrollTop()
    position = 123 # OR  position = $("#myDiv").offset().top
    if ($(window).scrollTop() >position )
      $("#sticky").unstick()
    else
      $("#sticky").sticky()
  )

You can have a look at this stackoverflow answer https://stackoverflow.com/questions/13522971/jquery-to-detect-scrolling-div-position

Hope it helps! :)

[saruban]

I tried to add it to my script but not working.
Please check this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.js"></script> <script> jQuery( document ).ready(function() { jQuery("#stick-form-prv").sticky({topSpacing:645}); jQuery("#stick-form").sticky({topSpacing:290}); jQuery("#stick-form-img").sticky({topSpacing:180}); jQuery("#stick-form-btn").sticky({topSpacing:115}); }); # When scrolling $(window).scroll( () -> # Get window position # console.log $(window).scrollTop() position = 123 # OR position = $("#myDiv").offset().top if ($(window).scrollTop() >position ) $("#sticky").unstick() else $("#sticky").sticky() ) </script>

[Arpsara]

@saruban I think you have to rewrite it in javascript (it's coffeescript here! :) )

[saruban]

Can you please help me to rewrite it on js. :)

…

On 1 Aug 2017 17:39, "Arpsara" ***@***.***> wrote: @saruban <https://github.com/saruban> I think you have to rewrite it in javascript (it's coffeescript here! :) ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#256 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJiowYed1fTUOej4b3wbtzfOlGP9wHRLks5sTxWSgaJpZM4NUms3> .

[ao]

@saruban

$(window).scroll(function() {
  var position;
  position = 123;
  if ($(window).scrollTop() > position) {
    return $("#sticky").unstick();
  } else {
    return $("#sticky").sticky();
  }
});

[saruban]

Thank you so much. Will Check and back to you. :)

…

On 1 Aug 2017 6:24 pm, "Andrew Odendaal" ***@***.***> wrote: @saruban <https://github.com/saruban> $(window).scroll(function() { var position; position = 123; if ($(window).scrollTop() > position) { return $("#sticky").unstick(); } else { return $("#sticky").sticky(); } }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#256 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJiowR4hR8hCp4dVEK94VT4uFXFLHyDMks5sTx_wgaJpZM4NUms3> .

[naho2081]

You don't need to unstick.

Proper way is to determine "bottomSpacing" value correctly based on the height of the footer that can be variable in some cases.

Just add dummy divs on the page with
div(id="contentEnd") - where main page content ends and starts footer
div(id="pageEnd") - at the end of the footer

And then initialize Sticky plugin

bottomSpacing = $("#pageEnd").offset().top - $("#contentEnd").offset().top
$('#sticky').sticky
	topSpacing: 100
	bottomSpacing: bottomSpacing

[kytosai]

You can view more detail how to pause sticky when reach destination point - #257 (comment)

[jeremy-hawes]

Another option that worked a little better in my situation

    var footerBottomAdjust = $('#footer').height() + 50;
    $('#sticky').sticky({
        topSpacing: 200,
		bottomSpacing: footerBottomAdjust
    });

[itsKnight847]

@jeremy-hawes tyvm!