I have used the affix property to fix the div in a particular pixels from top but this is not working out for me.The sidebar is not fixed out here
Here is the code I am using
<div id="sidebar" style="float:left" class="affix">
<div id="nav-anchor"></div>
<nav class="indexnav">
<ul id="indexlist">
<li>Adolescent gynecology</li>
<li>Breast evaluation</li>
<li>Birth control/emergency contraception</li>
<li>Endometriosis</li>
<li>Fibroids</li>
<li>HPV vaccination</li>
<li>Infertility</li>
<li>Menopause and hormonal issues</li>
<li>Menstrual problems</li>
<li>Minimally invasive surgical approaches</li>
<li>Normal and abnormal Pap smears</li>
<li>Polycystic ovarian syndrome</li>
<li>Premenstrual syndrome</li>
<li>Sexual dysfunction</li>
<li>Sexually transmitted diseases</li>
<li>Vaginitis</li>
<li>Urinary and fecal incontinence</li>
<li>Advanced laparoscopy</li>
<li>Colposcopy services</li>
<li>Gynecology surgical procedures</li>
<li>Need to know more?</li>
</ul>
</nav></div>
Css I used for the above code
#sidebar .affix{
top:10px;
position:fixed;}
Javascript Used
$(document).ready(function(){
jQuery("#sidebar").affix({
offset: {
top: 700
}
});
$("#sidebar").on('affixed.bs.affix', function(){
alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
});
});
In your CSS try removing the space in this line:
#sidebar .affix
Also your javascript is quite right either should be something like:
jQuery('#sidebar.affix').css ( { <style definitions go here> } );
unless of course you have some plugin that defines an 'affix' method !
Related
I have a web page with a top horizontal navigation bar – it is Twitter's Bootstrap Fixed Top Navbar to be more precise – with a bottom-fixed position (actually it's not really fixed by CSS; see JavaScript below) so the navigation bar will first be visible at the bottom of the page and later displayed at the top of the page when scrolling (position: fixed; top: 0).
I have the navigation links set up with anchor tags to take the viewer to various places in the body of the page. Unfortunately, sometimes it takes the user a bit too far down (especially if the user is at the top of the page and the navigation bar has not yet became fixed).
Take a look at my HTML structure:
<div id="landing"></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</nav>
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
I'm using the following JavaScript to ensure that the navbar sticks to the top of the page after scrolling down:
function init() {
nh = 50; // navbar height
sh = $(window).height();
ih = sh-nh;
$("#landing").css('height', ih+'px');
}
function navbarState() {
if ($(window).scrollTop() > ih) {
$('.navbar').addClass('navbar-fixed-top');
} else {
$('.navbar').removeClass('navbar-fixed-top');
}
}
init();
navbarState();
$(window).on('load scroll resize orientationchange', function () {
init();
navbarState();
});
One can observe that repeatedly pressing the first anchor link causes a bouncing effect. How can I prevent that?
My goal is to have the navigation scroll to the proper anchors, no matter whether the user is at the landing page or not.
Why not using navbar-fixed-bottom as well?
See here: https://jsfiddle.net/y7soL4ej/
I added the mentioned class as default to nav. And modified minor things:
CSS
html, body, div#landing {
height: 100%
}
section, [id*=section] {
padding-top: 52px;
}
JS
function init() {
nh = 50 + 2; // navbar height + 2x border width (top + bottom)
sh = $(window).height();
ih = sh-nh;
//$("#landing").css('height', ih+'px');
}
function navbarState() {
if ($(window).scrollTop() > ih) {
$('.navbar').removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top');
} else {
$('.navbar').removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom');
}
}
init();
navbarState();
$(window).on('load scroll resize orientationchange', function () {
init();
navbarState();
});
The jumpy behaviour: When the navbar is at the bottom in your example it is part of the dom flow - it seperates the landing div and the section1 div by its height. As soon as it is clicked the browser jumps to the location, the navbar is then set as fixed at the top - and is no longer part of the flow (the both divs are no longer seperated by it). The section divs are therefore moved accordingly up to the landing div closing the gap. So clicking the same section anchor again will result in an additional jump, because the section was repositioned due to the landing div went from position:static to position:fixed.
That's an additional reason why I recommend to use navbar-fixed-bottom.
Update
new fiddle: https://jsfiddle.net/y7soL4ej/2/
I removed .navbar-fixed-bottom from HTML and JS as the navbar should not jump from bottom to top.
To make it smooth and avoid the earlier mentioned jumpy behaviour, I had to set it to absolute position.
some CSS needed to be added:
div#landing {
padding-bottom: 72px;
margin-bottom: -72px;
}
nav.navbar {
position: absolute;
left: 0; right: 0;
}
nav.navbar.navbar-fixed-top {
position: fixed;
}
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
Trying to make a specific id (#logo) disapear once I scroll in specific section id ("#performance-graphs"), the id that is hidden must show itself again once I have scrolled out that section.
Please see my code below, currently id does not work but the idea is there, not sure what I am doing wrong. basically I trying to make my main header smaller by removing the logo when it gets to the chart section.
JQUERY CODE
<script type="text/javascript">
$(document).ready(function() {
$('#performance-charts').scroll(function() {
var scroll = $('#performance-charts').scrollTop();
if (scroll > 10) {
$('#logo').css("display", "hidden").fadeOut(250);
}
else {
$('#logo').css("display", "block").fadeIn(250);
}
});
});
</script>
HTML SNIPPET BODY
<section id="performance-graphs">
<a id="performance-graphs"></a>
<div class="double-space"></div>
<div class="centered-wrapper">
<h1 class="section-title">charting performance</h1>
...............................................................
</div>
</section>
HTML SNIPPET HEADER
<span itemscope itemtype="http://schema.org/LocalBusiness"><header id="fixed" class="solid-header">
<div class="centered-wrapper">
<div itemscope itemtype="http://schema.org/Service"><div itemprop="ServiceType" content="Asset and Fund Management"></div></div>
<div id="logo"><img src="../images/value_images/VPM_global3a.png" alt="White Fleet Globel Select Opportunities">
<p>LU0721514452:USD - Managed by Value Portfolio Managers (Pty) Ltd</p></div>
<br>
<a class="nav-btn"><i class="fa fa-bars"></i><span>Menu</span></a>BaB
Your help would be greatly appreciated.
Ok here you go. I used your fiddle and updatet it HERE
Basically you have bad code there, because an id should be unique! (i just added another charakter to one of the duplicated IDs.
I just updated your JS Code like this:
if ($(document).scrollTop() > $('section#performance-graphss').offset().top) {
Because you need the offset().top of your graph container and compare it to the scroll position of the qhole document.
EDIT:
Does this FIDDLE help?
I just added another check for hiding the element:
$('section#performance-graphss').offset().top + $('section#performance-graphss').height() > $(document).scrollTop()
So when you scroll past the container the logo gets display: blick; again.
Watch out for the CSS i added: The containers need a height.
#performance-graphss {
width: 100%;
height: 700px;
display: block;
}
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>
I have a site on Google App engine written in python/django/html. Site is located at http://perlesloyfer.no
Its a kind of blog that shows some images of people with a kind of bows i make. I have implemented a "sticky header" at the top, and im showing ads in the 9th position of the posts. But when i scroll the list the Google Ads are somehow forcing them self to be on top of the header. Image of this is in the bottom of the question.
What causes this, and is it possible to fix it? I want the ad to scroll like the other posts, but it should not show as it is "over" the header when its at that position.
Sticky header jquery code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#sticky').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
//$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
$('#sticky').addClass("sticky");
} else {
$('#sticky').removeClass("sticky");
}
});
});
Actual HTML for the header:
<div id="sticky" class="top-area">
<div class="main-header">Perlesløyfer</div>
<div class="main-subheader"><p>Av Håkon Bogen</p></div>
<div class="tabs">
<ul>
<li>Bilder</li>
<li><a class="selected" href="./about">Om</li></a>
<li>Kjøp</li>
<li>Last opp</li>
</ul>
</div>
CSS for sticky:
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
}
Google Ad code:
<div class="commercial" id="page-wrap-ad">
<p id="ads">
<!--- google_ad_client = .... -->
<script type="text/javascript">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
Not sure if I am allow to post this or not, but here goes:
Find the specific target element (div, class, etc) of the Ad in questions and use CSS to overwrite its positioning.
Example:
#myAnnoyingAd{
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
Just added a greater z-index to the sticky header. Wasn't harder than that.
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
z-index:1000;
}