I have an issue I was hoping someone could kindly help me with. I'm currently building a webiste, and tried to use a jquery plugin for the first time to create a sticky navigation bar (http://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/).
When I assign an #ID to the nav tag, and change the CSS rule accordingly to apply just on this specific nav, the plugin stops working. The problem is that I would like to have a few navs on my page and I don't see another option.
Any suggestions?
Thanks!
And here is a link to the full code:
http://codepen.io/anon/pen/gbQBOo
HTML:
<section id="screen1">
<p>Scroll down</p>
<nav id="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
CSS:
/* Navigation Settings */
#main-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
}
JS:
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('#main-nav').addClass('fixed');
}
else {
$('#main-nav').removeClass('fixed');
}
});
});
In CSS, #main-nav is more precise than .fixed, so it takes precedence.
You could:
1) change .fixed into #main-nav.fixed
2) set the position from .fixed to fixed!important
3) not use an id but a specific class for your nav, and make sure .fixed is defined after that new class
Related
I am working on a simple portfolio for my friend. He wants it so that when I go to his portfolio section, the navbar simply should be hidden and it should only show up when I hover over it.
I saw a lot of tutorials on w3schools on how they do it but quite wasn't able to do it. Here is my HTML code for my navigation.
Once again, I want it so that the Navigation page should be hidden when I click "portfolio" and that it should only show when I hover over it.
Here is an example of what I mean.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
HTML CODE:
<header id="header" class="header-tops">
<div class="container">
<h1>Parth Prajapati</h1>
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid"> -->
<h2>I'm a 4th year <span>Architectural Student</span> based in Toronto</h2>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
<div class="social-links">
<!-- <i class="icofont-instagram"></i> -->
<i class="icofont-linkedin"></i>
</div>
</div>
</header><!-- End Header -->
JS Code:
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementsByClassName('container').style.top = "0";
} else {
document.getElementsByClassName('container').style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
what css properties did you add?
There are few things you can do to improve your code.
1)see if your navbar position needs fixed or sticky property
and 2)use id to your navbar, classes have lower specificity than id.
the example you provided has this css.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
your js code just applying the style to the whole container class, is that what you really want?
I have a navbar with links to a article with id="about", but my navbar is fixed-top, so when I click on the link, my navbar is in front of the title of the section.
I solved this problem by using this: <span id="about" class="anchor"></span>
.main-content article .anchor{
position: absolute;
top: -106px;
}
But for scrollspy I need the href of the link to be the same as the id of the section where I want to "scrollspy" but I can't use the same id twice.
How can I solve this? Is there a way to go to add -100px to your href or something like that?
You can add a 'false' anchor like this above your about content:
<div style="margin-top: -95px; position: absolute;" id="about"></div>
This will add a margin to your section above and after some adjustment you can change the px value to suit your situation.
You can try with jquery like this:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
$('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
}
}
I had this problem as well, I found it easy to just place an anchor tag above where you want to jump to and then add scroll-margin-top to my CSS with a value.
#jumpto {
scroll-margin-top: (insert value here);
}
<nav>
<ul>
<li>Nav Link</li>
</ul>
</nav>
<a id="jumpto"></a>
<section>
<h2>
This is where I want to jump to but the stupid navbar is in the way!
</h2>
</section>
I'm currently working on a website and I'm having a trouble with anchors. My header is fixed and when I click on anchor it sends me on other page how it is supposed to be, but I'm missing 80 pixels which is height of my fixed header. There is a script that made accordion opened on new page when I click on anchor but it should scroll 80px less... here is some code I have over there in my .jsp file
<a href="${parentLink}#${menuItem.name}" class="${menuItem.classes[anchorClasses]}">
and there is a .js that makes my accordion opened on the new page
$(document).ready(function () {
if (location.hash != null && location.hash != "") {
$('.collapse').removeClass('in');
$(location.hash + '.collapse').collapse('show');
}
});
I think that you guys will need more info, so ask me anything that could help you. I'm new in this and I don't even know which code should I post here to help you guys realize what the problem is... Thank you (:
One common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#your_anchor_id::before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 80px above the main element, without causing any other visible changes.
Another idea is to use smooth scrolling with an offset. (View the example "Full Page" by clicking that link at top right of the snippet window)
$("nav ul li a").on('click', function(event) {
if (this.hash !== "") {
var myOffset = $('#myOff').val(); //get value from input (offset value)
if (myOffset==='') $('input').addClass('alert');
event.preventDefault(); // Prevent default anchor click behavior
var hash = this.hash; // Store hash
// jQuery animate() method for smooth page scroll
// 900 is the number of ms to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - myOffset
}, 900);
} // End if
});
//$('div:contains(Section)').css('font-weight','bold');
html,body{margin:0;padding:0;font-family:Calibri;}
body{height:2500px;}
ul,li{margin:0;padding:0;}
*{box-sizing:border-box;}
section{
display: grid;
place-items: center;
width: 100%;
height: 500px;
}
nav{position:fixed;width:80vw;background:white;border:1px solid red;}
::placeholder{color:#ccc;}
nav ul li{
display: inline-block;
padding:0;
border: 1px solid rgba(200,200,200,0.3);
}
nav ul li:hover{background: #ddd;}
a{text-decoration:none;padding:10px 25px;display:inline-block;}
#one{background:palegreen; padding:50px;}
#two{background:palegoldenrod;}
#twa{background:lightblue;}
#fer{height:1500px;}
.alert{border:1px solid red;background:#ffc0cb99;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li>NAV / HEADER:</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li><input id="myOff" type="text" placeholder="Offset (e.g. 75):" /></li>
</ul>
</nav>
<section id="one">
<div>
<div style="text-align:center">Section One</div>
<div>Directions:<br>(a) View as Full Page (link at top right)<br>(b) Enter offset number (for how many pixels the smooth-scroll will stop short)<br>(c) Click nav "Two" or "Three" and observe<br>(4) Repeat using a different offset value<br>Note: The fixed header is deliberately not full width in order to show the top of the next section scrolling UNDER the header (undesireable) The offset prevents that, and is what you are asking about.</div>
</div>
</section>
<section id="two">
Section Two
</section>
<section id="twa">
Section Three
</section>
<section id="fer">
Section Four
</section>
Example code ripped off from:
w3schools Company Theme example
I've been trying to create a nav that would be transparent at the top and would gain white color as the user scrolls down the page. My header height is 800px and I want my nav to lose 100% of transparency after those 800px. Here`s my code:
<header id="header">
<nav class="navbar">
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Our qualities</li>
<li>Contact us</li>
<li>contact us</li>
</ul>
</nav>
nav {
width: 1600px;
position: fixed;
top: 0;
ul {
margin: 0 auto;
li {
display: inline-block;
padding: 5px 20px;
a {
font-family: $f1;
font-size: 16pt;
color: $c3;
}
}
}
}
}
First I tried with opacity, but it didn't work, and on top of that child elements (ul and li) had opacity of 0 as well.
Here`s the JS for that:
jQuery(document).ready( function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
var navOpacity = scrollPos /800;
jQuery('.navbar').css(opacity, 'navOpacity');
if (jQuery('nav').css('opacity') < 1) {
jQuery('.navigation').css('opacity', '1')
};
Then I tried to change RGBA value on scroll, that didn't work either
Instead of
jQuery('.navbar').css( opacity, 'navOpacity' );
I used
jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")');
That failed as well, so, I have to ask you too help me
You have made opacity not a string, but the variable navOpacity has become a string. That was wrong. Everything else is working fine in general. :)
// change
$('.navbar').css(opacity, "navOpacity");
// to
$('.navbar').css("opacity", navOpacity);
Working example.
The issue in your code is that you're providing navOpacity as a string to css(), instead of the variable itself. Try this:
$('.navbar').css('opacity', navOpacity);
Also note that your current logic is backwards to what you describe as your goal (the header starts transparent and becomes opaque at 800px) and the logic can also be simplified a lot. Try this:
$(window).scroll(function() {
var pc = $(this).scrollTop() / 800;
$('.navbar').css('opacity', 1 - pc);
});
Working example
Alternatively you could use jquery method .fadeTo() instead of css('opacity'). This method animates the opacity of the elements smoothly. It is easier to use and the animation is pretty good looking compared to instant opacity change.
jQuery('.navbar').fadeTo( "slow" , navOpacity);
if (jQuery('nav').css('opacity') < 1) {
jQuery('.navigation').fadeTo( "slow" , 1);
};
I have a horizontal menu that is fixed to the top of the page and built by the following list:
<div id="menu">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
Currently there is an empty space to the far left of the home menu link. How could I go about having an image of their logo show up in this location after the user scrolls down the page 150px?
I imagine this is a combo of javascript and CSS which is fine, I just need a roadmap of how to achieve the result. Thanks.
Place an element for the logo in the area you want it to be and provide it styling. Set it to display none at first.
Attach a scroll listener to the window. Check for if the page has scrolled 150px from the top. If it has change the display to block on the element with the logo. It if hasn't change the element to display none if it is visible.
You can do it with jQuery, if you'd like. The idea will be to go ahead and add the image, and then use JavaScript to add a class of hidden to the image (the image will be displayed whenever JavaScript is turned off, then), and then with jQuery, add or remove the class hidden depending on the scroll position.
<div id="menu">
<img src="path/to/logo.png" id="logo">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
/* CSS */
.hidden {
display: none;
}
// jQuery
$(function() {
var logo = $('#logo');
logo.addClass('hidden');
$(window).scroll(function() {
if( +$(this).scrollTop > 149 ) {
logo.removeClass('hidden');
} else {
logo.addClass('hidden');
}
});
});
Just as a note, if you would like the image to always be hidden if JavaScript is off, then hard-code class="hidden" into the HTML. When JavaScript is turned on, the code will still work the same. It's just a preference of how you want your page to behave with vs without JavaScript being on.
here is a little example how you can show/hide an element on page scroll with jQuery. hope this helps: http://jsfiddle.net/KWyS2/
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
$('.addDistance').html(scrollTop);
if(scrollTop >= 150 ) {
$('.show-hide-me').fadeIn();
} else {
$('.show-hide-me').fadeOut();
}
})
})
</script>
<div class="show-hide-me"></div>
<div class="content"></div>
<p class="addDistance"></p>
<style text="type/css">
.show-hide-me {
display:none;
width:100px;height:100px;
background-color:orange;
position:fixed;
top:0px;
left:0px;
}
.content {
height:10000px;
background-color:fuchsia;
width:10px;
}
p {
position:fixed;
top:0px;right:0px;
border:solid 1px red;
}
</style>