I have a CSS file with various styles defined within it.
One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes.
For example:
.mystyle.blue {
position: fixed;
}
Here, elements with both the classes .mystyle and .blue will have a fixed position, while elements with just .mystyle won't get the same treatment.
In addition to these predefined styles, I have jQuery functions that can dynamically add or remove inline styles. For instance, under certain conditions, all elements with the class .mystyle might receive the position: fixed style.
To accomplish this, I use the following code snippets:
$(".mystyle").css("position", "fixed")and
$(".mystyle").removeAttr("style");However, when the inline styles are removed, the original stylesheet settings are no longer applied. This means that even if I expect elements with the .mystyle.blue class to retain the position: fixed styling, they don't.
Do you have any suggestions for a workaround?
UPDATE
I have identified the issue and found a solution, although it's not exactly what I anticipated.
When setting position: fixed via jQuery, I also specify a top position, which is often negative like -64px (although this value is dynamic). However, both properties are removed simultaneously.
In the stylesheet, the code looks like this:
position: fixed;
top: 0;
Initially, I assumed that once the inline styles were removed, both the position and top values would revert back to their original state. Surprisingly, the negative top position doesn't reset to 0 as expected. Although the position does go back to its default behavior.
If I include an !important tag for top: 0!important, then the desired outcome is achieved.