Title: Active vs Inactive state
Last modified: November 26, 2016

---

# Active vs Inactive state

 *  Resolved [iwani](https://wordpress.org/support/users/iwani/)
 * (@iwani)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/)
 * 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](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8483340)
 * 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, 8 months ago by [Senff - a11n](https://wordpress.org/support/users/senff/).
 *  Thread Starter [iwani](https://wordpress.org/support/users/iwani/)
 * (@iwani)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8483422)
 * Thanks for the reply Mark
 * Here’s my URL: [http://src.imu.edu.my/clinicalcampus/](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](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8483580)
 * 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](https://wordpress.org/support/users/iwani/)
 * (@iwani)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8483819)
 * 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](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8484591)
 * 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](https://wordpress.org/support/users/iwani/)
 * (@iwani)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8484950)
 * 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.

 * ![](https://ps.w.org/sticky-menu-or-anything-on-scroll/assets/icon-256x256.gif?
   rev=2564941)
 * [Sticky Menu & Sticky Header](https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll/)
 * [Active Topics](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [iwani](https://wordpress.org/support/users/iwani/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/active-vs-inactive-state/#post-8484950)
 * Status: resolved