Jump to content

Fredy Rivas

Color tween wont work after changing position from absolute to fixed

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello people!

I have a <nav> with absolute position and inside of it some links <a>. After some scrolling I change its position to fixed to stick it at the top.  (using stickOnScroll plugin)

At the beginning I bind a mouseover to tween color of the text in <a> and works fine, but when I change it to fixed position the tween disappear. 


Thank you so much!

<nav class="full-width" id="home_menu">
    <ul class="container">
        <li><a href="javascrip:void(0)">slim center</a></li>
        <li><a href="javascrip:void(0)" id="menu2">tratamientos</a></li>
        <li><a href="javascrip:void(0)">estilo de vida</a></li>
        <li><a href="javascrip:void(0)">por un méxico más sano</a></li>

  position: absolute;
  height: 60px;
  top: 700px;
  width: 100%;
  border-top: solid 1px white;
  border-bottom: solid 1px white;

nav#home_menu ul{
  min-height: 60px;
  height: 60px;

nav#home_menu ul li{
  display: inline;
  float: left;

nav#home_menu ul li a{
  display: inline-block;
  margin-top: 23px;
  width: 295px;
  text-align: center;

        topOffset: 0,
        setParentOnStick:   true,
        setWidthOnStick:    true,
        onStick: onSticknav

function onSticknav()
    $('#menu2').bind('mouseover', overMenu);

function overMenu(e)
   TweenMax.to($(e.currentTarget), .4, {color:"#009aff"});

Link to comment
Share on other sites

Sorry, I'm unfamiliar with that stickOnScroll plugin. I find it hard to imagine why changing the position type of an element would interfere with tweening its color.


If you can provide a demo that we can test it would be very helpful. We suggest using CodePen as described here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/


on further review, I made a quick demo with your code and the onStickNav plugin:



can't seem to replicate the problem as the rollover color change on the 2nd link works before and after the nav gets position:fixed


Feel free to fork that demo so that it clearly shows the problem.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.