SOLVED jQuery question
-
-
- Pixelshift
- Hero Rocketeer
- Posts: 333
- Thanks: 1
- Audio Engineer | Web Design
-
Strange it wont work on my site? What code exactly are you using and where exactly are you putting it lol
I have the following CSS/JS code in an atom box at the bottom of page settings and jQuery/JS frameworks on also in Atom. If i use the fields at the bottom of particle settings page, the JS doesnt loat at all in my page source.
(function($) {
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 50) {
$('#g-navigation').addClass('fixed');
} else {
$('#g-navigation').removeClass('fixed');
}
});
})(jQuery);
and this in my custom CSS file...
.fixed {
position: fixed;
top: 0;
}
I can see the JS loading in my page source so i wonder whats blocking it from running on my site? - "5 out of 4 people have a problem with fractions..."
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
.fixed {
position: fixed;
top: 0;
}
^^^ that isn't very specific... I'm sure it's not overriding the current position setting - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
- I'm just staring at the code on #g-navigation in my dev tools (tools > more tools > dev tools > elements pane) in Chrome... and I see the "fixed" class being dynamically added/removed as a class attribute... as I scroll up and down
- Last Edit: 8 years 11 months ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
A. I think you should modify your script and CSS to use something besides "fixed" ~ use "custom-nav-fixed" or something more unique
B. add it to the <body> instead of #g-navigation... that way you can do whatever you want with your content, anywhere on your page, when that class is active...
body.custom-nav-fixed #g-navigation {
position: fixed;
top: 0;
right: 0;
left: 0;
}
and if you wanted you could then easily target the position below it so it's still visible initially...
body.custom-nav-fixed #g-mainbar {
padding-top: 150px;
}
just an example of why it's better in the <body> tag
looks like it's all werkin'
If a thread is solved please edit your *original/first* post and place "[SOLVED]" (no quotes; but you do need the brackets) at the beginning of your post title. Changing the post icon to the Solved Checkmark is helpful too.
//There's a Thank You button as well if you're so-inclined - Last Edit: 8 years 11 months ago by Matt.
-
The following users have thanked you: Pixelshift
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Pixelshift
- Hero Rocketeer
- Posts: 333
- Thanks: 1
- Audio Engineer | Web Design
-
Dude, good looking out! Your right, its totally working, just not all the way cause my css sucks! lol
Heres what i ended up doing to make it finally work. The JS was perfect, my css, not so much.
//Sticky Menu//
.fixed {
position: fixed !important;
top: 0;
left: 0;
right: 0;
}
I had to add the !important to get it to finally work, but then it was jamming left, so i added the left: 0; and right: 0; and that seemed to do the trick!
Now all i have to do is figure out how to get a Logo to magically appear when its in the fixed position! 0_o!
Cant thank you enough Matt, if your ever in Los Angeles hit me up, i'll buy you lunch! - "5 out of 4 people have a problem with fractions..."
-
-
-
- Pixelshift
- Hero Rocketeer
- Posts: 333
- Thanks: 1
- Audio Engineer | Web Design
-
Your post beat mine! lol Read you loud and clear, i will take your advice and try to implement it soon as i get a chance!
Thanks again Matt =) - "5 out of 4 people have a problem with fractions..."
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22303
- Thanks: 3229
- messin' with stuff
-
Pixelshift wrote:
Now all i have to do is figure out how to get a Logo to magically appear when its in the fixed position! 0_o!
looks like we posted at the same time... see my last post... move it to the <body> and I'm sure you'll figure out how to thusly display a logo/image hiding in the left of your fixed bar... you know, a particle with a custom class that has default css of display:none; and then body.custom-nav-fixed css of display:block;
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Pixelshift
- Hero Rocketeer
- Posts: 333
- Thanks: 1
- Audio Engineer | Web Design
-
Make that 2 lunches lol
And if anyone is curious, heres the code im using so far to have a sticky nav menu with a logo that fades in.
jQuery
(function($) {
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 200) {
$('#g-navigation').addClass('fixed');
$('.menulogo').fadeIn('menulogo');
}
else {
$('#g-navigation').removeClass('fixed');
$('.menulogo').fadeOut('menulogo');
}
});
})
(jQuery);
CSS
//Sticky Menu//
.fixed {
position: fixed !important;
top: 0;
left: 0;
right: 0;
}
//Menu Logo//
.menulogo {
display: none;
} - Last Edit: 8 years 11 months ago by Pixelshift.
- "5 out of 4 people have a problem with fractions..."
-
Time to create page: 0.064 seconds