targeting a specific nav div in code - javascript

I have the following code which applies classes to the <nav> element. The code works so no issues there.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav').addClass('stick');
$('nav').css('top','0');
}
if ($(window).scrollTop() < 300) {
$('nav').removeClass('stick');
$('nav').css('top', '0');
}
});
});
however I use two elements in my website so I only want the code to apply to this specific nav
html
<nav role="main-navigation"> ... </nav>
As well, I would also like the code to ONLY apply to this nav element on screens >768px

1/ "Want the code to apply to this specific nav "
If you don't want to add more attribute (id, class) you can use Attribute Equals Selector
$("nav[role='main-navigation']").
2/ "ONLY apply to this nav element on screens >768px"
Reference to this answer
if (window.matchMedia('(min-width: 768px)').matches) {
//...
} else {
//...
}

$('nav')[0] --> it identifies specific nav tag.. without using id we can specify like this.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav')[0].addClass('stick');
$('nav')[0].css('top','0');
}
if ($(window).scrollTop() < 300) {
$('nav')[0].removeClass('stick');
$('nav')[0].css('top', '0');
}
});
});

Related

Hide the upper part of the navbar when scroll (smoothly!)

Hello I customized a Bootstrap navbar with 2 rows (the upper part is just logo and social links and the down part are navigation links). I am trying to hide the upper part when scrolling but I can't find a way to do it smoothly. I think the code below is the best solution I found, but for now the eventlistener on transitionend doesn't work and the class 'hidden' is never added.
var scrollpos = window.scrollY;
var header = document.getElementById("header-up-section");
function add_class_on_scroll() {
header.classList.add('visuallyhidden');
header.addEventListener('transitionend', function(e) {
header.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
function remove_class_on_scroll() {
header.classList.remove('hidden');
setTimeout(function () {
header.classList.remove('visuallyhidden');
}, 20);
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 20){
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
console.log(scrollpos);
});
*/and CSS :
#header-up-section.visuallyhidden {
opacity: 0;
}
#header-up-section.hidden {
display: none !important;
}
The header-up-section turns invisible but the div is not hidden. Any idea to help?
Finally no need for JS to do this. Just need 2 bootstrap navbars and add to the second one (which is a pseudo 'down part' of a two rows navbar) the bootstrap class 'sticky-top'. It does the job perfectly ;)

Add class onscroll combined with onepage-scroll.js plug-in

I'm currently using the onepage-scroll.js (https://github.com/peachananr/onepage-scroll) plug-in on my website to scroll through the homepage. When scrolling past the first "slide" I would also like to add a class (sticky) to my header to change some CSS. I've tried the code below, but I can't seem to get it working and I'm kinda in the dark here on how to make this solution work.
var header = $("header");
$("#sliders").scroll(function() {
var scroll = $('#sliders').scrollTop();
console.log(scroll);
if (scroll >= 50) {
header.addClass("sticky");
} else {
header.removeClass("sticky");
}
});
Try to make it on document ready.
Down only my example worked code on onepage-scroll.js
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: ".sectionscroll",
responsiveFallback: 600,
loop: true,
afterMove:function (index){
if ((index == 2)||(index == 3)){
$('#main').addClass('darktheme');
}else{
$('#main').removeClass('darktheme');
}
}
});
//$(".main").moveTo(2);
$(".btn-list-bottom").click(function(){$(".main").moveTo(4)});
});
All you section must have the same class.

How to dynamically select previous sibling element

I have a problem with the implementation of non-standard solutions. So my HTML:
6
7
8
And my poor, incompetent js:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 0) {
$("#page-link-6").addClass("active" );
}
});
I have selected (active) link. I need add same (active) class to previus link when user scroll at top of document. This example have active #page-link-7. Previus is 6. So when user scroll at top, class "active" will be added for #page-link-6. But if current active page-link is 9, how can i go to 8 dynamically? I hope someone can help me here. Thanks.
Find the element that is currently active, then use jQuerys .prev() method to find the "previous" link.
Something along the likes of
$('.active').prev().addClass("active" );
What you can do is just find the next and previous sibling of active link and add class to it like below:
Wrap all the <a> in a separate class
<div class="Links">
6
7
8
</div>
JS
var activeLink=$('.Links').children().find('.active').removeClass('active');
if($(window).scrollTop() + $(window).height() > $(document).height() - 0)
{
$(activeLink).prev().addClass('active');
}
else
{
$(activeLink).next().addClass('active');
}
UPDATE
DEMO
$(window).on('scroll',function(){
var activeLink=$('.Links').find('.active');
if($(window).scrollTop() + $(window).height() > $(document).height() - 0)
{
if($(activeLink).prev().length>0)
{
$(activeLink).removeClass('active');
$(activeLink).prev().addClass('active');
}
}
else
{
if($(activeLink).next().length>0)
{
$(activeLink).removeClass('active');
$(activeLink).next().addClass('active');
}
}
});
I don't really understand your question, but sounds like .toggleClass() may be better for you.
$('a').on('click', function (e) {
$('a').toggleClass("active");
});
Simple Demo Fiddle.

How can I hide a button when scrolled to the top of a page?

I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?
You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}
Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).
You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....
This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});

Javascript can't finish code

When user scroll and
navmenu
come to
margin-top 20px
, then the menu will stop and be fixed. How i can to that? navmenu is Div id of my menu. I try all ways and I can not figure out.
Here is code that i need ...
$("navmenu").scrollTop(function () {
var height = $("navmenu").scrollTop();
alert(height);
if (height > 20) {
/* need help here */
}
});
Sample Fiddle
This works on scrolling on the page itself, you may want to adjust if you're referring to scrolling specific element.
CSS
#navmenu {
width:100%;
height:20px;
background:grey;
position:relative;
}
jQuery
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 20) {
$('#navmenu').css('position', 'fixed');
} else {
$('#navmenu').css('position', 'relative');
}
});
navmenu is Div id of my menu
The selector navmenu will match <navmenu> elements (which do not exist in HTML).
You want #navmenu.

Categories