javascript - jQuery Sticky Plugin Variable Top Spacing -
i'm using jquery sticky plugin stick menu , contact information top. site responsive, spacing top menu changes. i'm trying different spacing based on css value of contact info, it's not working. pretty sure jquery correct...
$(document).ready(function(){ function checkforfloat() { settimeout(checkforfloat, 100); if($("#contact").css("float") === "none") { $("#headerbg2").sticky({topspacing:180}); } else if (!$("#contact").css("float") === "none") { $("#headerbg2").sticky({topspacing:120}); } } });
to make dynamic changes sticky documentation needs unstick first , updated
$("#headerbg2").unstick() & $("#headerbg2").sticky('update')
this needs change (!$("#contact").css("float") === "none")
either ($("#contact").css("float") != "none")
or else { .. }
demo dynamic window resize
code
$(document).ready(function () { $("#headerbg1").sticky({ topspacing: 0 }); function checkforfloat() { if ($("#contact").css("float") === "none") { $("#headerbg2").sticky({ topspacing: 50 }); } else { $("#headerbg2").sticky({ topspacing: 120 }); } } settimeout(checkforfloat, 1000); window.addeventlistener('resize', function (event) { $("#headerbg2").unstick() if ($("#contact").css("float") === "none") { $("#headerbg2").sticky({ topspacing: 50 }); $("#headerbg2").sticky('update') } else { $("#headerbg2").sticky({ topspacing: 120 }); $("#headerbg2").sticky('update') } }) });