Home / Questions / 69091
Accepted
Hector Hernandez
Asked: 2020-05-11 21:08:29 +0800 CST 2020-05-11 21:08:29 +0800 CST

Change color to top-bar using data sticky Foundation 6

  • 772

It happens that I have a top-bar on my site, and I leave the top-bar fixed using sticky, and it works great, my doubt is that I would like the top-bar to change color when I scroll down, this is the general code of my nav along with sticky, 2 attributes that I can't fully understand and maybe they are useful for the case: "data-container-class" & "data-sticky-class", thank you very much for your help

<div data-sticky-container>
  <div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%;">
    <div class="top-bar-left">
      <ul class="menu">
        <li><button class="hollow button border black-text" data-toggle="offCanvas"><i class="fi-list"></i></button></li>
        <li class="black-text"><%= link_to "Inicio", root_path, class: "bold" %></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu show-for-large">
        <li><%= link_to new_enterprise_registration_path, class: "button bold" do %><i class="fi-torsos-all"></i> Empresas<% end %></li>
      </ul>
    </div>
  </div>
</div>
jquery

1 Answers

  1. Best Answer

    In sticky there are three sets of different classes applied depending on the state of the element:

    • is-anchored is-at-topwhen it is "anchored" at the top boundary of the container.
    • is-stuck is-at-topwhen it is "stuck" at the top, somewhere in the container, that is, when scrolling. It can also have the value is-stuck is-at-bottomif it was set to "stick" to the bottom of the container on scroll.
    • is-anchored is-at-bottomwhen it is "anchored" at the bottom boundary of the container.

    Playing with those classes you can apply the styles you want depending on the position or state of the element.

    Clarifying the two parameters you mention:

    • data-container-classit is simply the class that will be applied to the container in which the "sticky" object will be scrolled, I consider that it is not very useful in this case, since it does not change according to the state of the scroll.
    • data-sticky-classis the class that will be applied to the sticky object, it will not do you much good either, since it is static regardless of the state or position of the object.
    • 0