Change color to the top-bar using data sticky Foundation 6

Question

Change color to the top-bar using data sticky Foundation 6

Navigation

#1 by (0 votes)

1

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 that when I scroll down, the top-bar changes of color, this is the general code of my nav along with sticky, 2 attributes that I can not understand at all and maybe maybe serve for the case is: "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 html5 css foundation

asked by Hector Hernandez 11.05.2017 в 07:08

source

1 answer

conflict between android libraries PHP - loadHTMLFile () does not load the html document

score 0 · Accepted Answer

In sticky there are three sets of different classes applied according to the state of the element:

is-anchored is-at-top when it is "anchored" at the upper limit of the container.
is-stuck is-at-top when it is "stuck" at the top, somewhere in the container, that is, when scrolling. It can also have the value is-stuck is-at-bottom if it was set to "stick" to the bottom of the container when scrolling.
is-anchored is-at-bottom when it is "anchored" at the lower limit of the container.

Playing with these classes you can apply the styles you want according to the position or state of the element.

Clarifying the two parameters that you comment:

data-container-class is simply the class that will be applied to the container in which the object "sticky" will move, I think it does not help much in this case, it does not change according to the state of the scroll.
data-sticky-class is the class that will be applied to the sticky object, it will not help you either, because it is static regardless of the state or position of the object.