jquery - Fix button at bottom when entering viewport -

hy there. fix button @ bottom when entering viewport. try fixed. i'm wondering proposition problem. tried sticky-kit | jquery plugin sticky elements or sticky plugin fix element stay @ top.

okay, based on you've given - assume want , do. i'm starting scratch don't expect exact implementation.

first off, here jsfiddle follow along with: https://jsfiddle.net/rockmandew/y34fdrvg/1/

besides code on fiddle (for styling , functionality), you're concerned jquery.

first, set variables this, variables navcontainer , unordered list. need set variable 'browser window scroll (in pixels) after "menu" link shown':

// browser window scroll (in pixels) after "menu" link shown var offset = 300;  var navigationcontainer = $('#cd-nav'),     mainnavigation = navigationcontainer.find('#cd-main-nav ul');  //hide or show "menu" link checkmenu(); $(window).scroll(function(){     checkmenu(); }); 

the checkmenu function magic happens though:

function checkmenu() {     if( $(window).scrolltop() > offset && !navigationcontainer.hasclass('is-fixed')) {         navigationcontainer.addclass('is-fixed').find('.cd-nav-trigger').one('webkitanimationend oanimationend msanimationend animationend', function(){             mainnavigation.addclass('has-transitions');         });     } else if ($(window).scrolltop() <= offset) {         //check if menu open when scrolling         if( mainnavigation.hasclass('is-visible')  && !$('html').hasclass('no-csstransitions') ) {             //close menu animation             mainnavigation.addclass('is-hidden').one('webkittransitionend otransitionend otransitionend mstransitionend transitionend', function(){                 //wait menu closed , rest                 mainnavigation.removeclass('is-visible is-hidden has-transitions');                 navigationcontainer.removeclass('is-fixed');                 $('.cd-nav-trigger').removeclass('menu-is-open');             });         //check if menu open when scrolling - fallback if transitions not supported         } else if( mainnavigation.hasclass('is-visible')  && $('html').hasclass('no-csstransitions') ) {                 mainnavigation.removeclass('is-visible has-transitions');                 navigationcontainer.removeclass('is-fixed');                 $('.cd-nav-trigger').removeclass('menu-is-open');         //scrolling menu closed         } else {             navigationcontainer.removeclass('is-fixed');             mainnavigation.removeclass('has-transitions');         }     }  } 

i won't go detail function because believe straightforward. thing have styles being applied when offset reached , vice versa.

i believe type of solution looking for.