Active vs Inactive state

  • Resolved iwani

    (@iwani)


    9 years, 7 months ago

    Hi Mark

    This is the 2nd project I’m using Sticky Menu and loved it from the first!

    However, I could never successfully code different CSS for the inactive and active states for my menu. It seems that classes “cloned” [older version] or “sticky-element-active” [newer version] is appended to the div by default

    On my 1st project – where I was using the older version of this plugin, I added a jQuery fix as shown below 

    
	jQuery(window).bind('scroll', function () {
		if (jQuery(window).scrollTop() > 50) {
			jQuery('.logoBar').addClass('fixed');
		} else {
			jQuery('.logoBar').removeClass('fixed');
		}
	});

    I tried using your suggested CSS selector and it’s not working for obvious reason and that is “sticky-element-active” shows up even in non-sticky state

    .sticky-element-original:not(.sticky-element-active)

    What do you think Mark? Should I go ahead and add the jQuery fix?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Senff – a11n

    (@senff)

    9 years, 7 months ago

    I wouldn’t recommend to use jQuery for that, since that CSS should work, because it basically targets the sticky element (.sticky-element-original) when it’s not active (:not(.sticky-element-active)), so I’m not really sure why it’s not working.

    For the record — the sticky element is active (and has class “.sticky-element-active“) when it’s NOT sticky. As soon as it becomes sticky, that class is removed and is then assigned to the placeholder.

    So to recap, this should usually work:

    .sticky-element-original.sticky-element-active {
   /* styles for the sticky element when it's NOT sticky */
}

.sticky-element-original:not(.sticky-element-active) {
   /* styles for the sticky element when it IS sticky */
}

    Can you share a link to your site so I can see what might be wrong?

    • This reply was modified 9 years, 7 months ago by Senff - a11n.
    Thread Starter iwani

    (@iwani)

    9 years, 7 months ago

    Thanks for the reply Mark

    Here’s my URL: http://src.imu.edu.my/clinicalcampus/

    I’m trying to make .top-header sticky. And when it sticks, I want to add a background color to that

    I have this in my CSS but it isn’t working. It is yellow even when it ain’t sticky

    .sticky-element-original:not(.sticky-element-active) {
   /* styles for the sticky element when it IS sticky */
   background: yellow;
}

    Am I doing anything wrong?

    Senff – a11n

    (@senff)

    9 years, 7 months ago

    Well, it is yellow all the time because it actually is sticky right from the beginning. There’s never really a situation when it’s not sticky.

    In most cases, people use the plugin to make an element sticky only after you scroll down a bit and the element reaches the top of the page. But your element is already at the top of the page when you load the page, so it’s sticky right away, and so the result is that has the yellow background right away too.

    Does that make sense?

    Thread Starter iwani

    (@iwani)

    9 years, 7 months ago

    Omg it made perfect sense and I can’t believe how silly I am to not notice this. I feel like hiding in my closet now omg!

    Ok thanks Mark! I will figure out what to do. Perhaps your plugin isn’t what I need (but I loveee itttt) for this layout

    Senff – a11n

    (@senff)

    9 years, 7 months ago

    Glad I could help! But yes, you probably don’t need the plugin — if the element is always sticky, you can give it position:fixed in your CSS and that should be enough. 🙂

    Thread Starter iwani

    (@iwani)

    9 years, 7 months ago

    Thanks Mark for reminding me that you don’t always need a plugin for everything hehehe. I feel so embarrassed yet it was a good realization

    position: fixed and the jQuery code I posted earlier was what I needed

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Active vs Inactive state’ is closed to new replies.