JointsWP4 (SASS): Changing Properties in Sticky

JointsWP4 (SASS): Changing Properties in Sticky

🔖 TL;DR: Is Sticky actually able to react to changes I give through JavaScript? If so, how?

🤔 Have you been struggling with making a sticky navigation bar in your JointsWP4 (SASS) project using Foundation's Sticky Plugin? 🌟 Well, you're not alone! Many developers face challenges when trying to implement sticky behavior that is triggered by a button click. But worry not, because in this blog post, we'll address common issues and provide easy solutions to help you achieve the desired sticky behavior. 💪

📝 The first step is to wrap your navigation bar in the required <div> elements and initialize Sticky using PHP. Here's an example:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
  >
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

🤔 Now comes the tricky part. You want the navigation bar to disappear when scrolling down, but stick while scrolling up, and all of this should happen when a button is clicked. Let's tackle this step by step.

1️⃣ You can start by using JavaScript to dynamically change the data-btm-anchor attribute of the navigation bar. However, simply updating the attribute won't make the navigation bar stick as expected. This is where you might wonder if you need to reinstantiate Sticky. And the answer is yes! You'll need to reinstantiate Sticky after changing the anchor. Unfortunately, there's no direct method provided by Foundation to do this. But don't worry, we'll show you a workaround.

2️⃣ According to the Foundation documentation, you can pass new parameters to an already existing plugin instance. But in your case, passing a new Foundation.Sticky object with a different btmAnchor parameter didn't yield any changes. You may need to try a different approach or consider implementing your own custom sticky behavior.

3️⃣ The Foundation documentation suggests programmatically adding Sticky to your navigation bar. This could be a potential solution, allowing you to directly alter the jQuery object. Here are the steps you can follow:

• Move your button function script to assets/js/scripts and run Gulp to compile it.

• Remove all the data-sticky tags from your <header class="header"> to ensure there's no sticky plugin registered when the DOM loads.

• Programmatically add the plugin using the provided code:

function button_fire(){
  var options = {
    topAnchor: "1",
    btmAnchor: "footer:top",
    marginTop: "1"
  };
  var stick = new Foundation.Sticky(jQuery('.header'), options);
}

However, you mentioned that this approach caused some glitches, with the header space collapsing and covering the content below. This issue might be a bug that you need to investigate further.

🤔 Furthermore, you might be wondering if you can change attributes by dereferencing var stick or using jQuery('#sticky_header') or jQuery('.header'). Theoretically, this should be possible. But keep in mind that you might need to destroy an instance of Sticky before creating a new one with a different btmAnchor value.

💡 Lastly, you mentioned having problems with jQuery and issues with using $ in your scripts. These problems might be preventing you from running the destroy() method of Sticky. We recommend opening a separate question to address these jQuery-related challenges.

By following these steps and exploring different approaches, you'll be well on your way to creating a sticky navigation bar that behaves according to your requirements. 💪 And remember, don't hesitate to reach out for help or further guidance if needed.

If you found this blog post helpful or if you have any additional tips or insights, feel free to share them in the comments below. Let's help one another conquer the world of web development! 🌎💻