The page has a sticky navbar that stay on screen all the time.
When I am scrolling to the next section(div) of the page, it will scroll so the div starts at the top of the screen , so the navigation bar cover it a little bit.
How to minus from y scrolling position the navigation bar height ?
$('html, body').animate({
scrollTop: $("#section2").offset().top // minus the nav height
}, 1000);
Also - how to make this navbar height available to my javascript (from the css) using a good practice ? (global var?)
You can select your navigation bar (here I gave my navigation bar the id nav) and get its height by doing:
$("#nav").height();
You can then subtract this from the scrollTop property.
However, do note, if your nav bar has padding and/or a margin, to correctly calculate the height you will need to use a different method from .height. See this answer if you're having difficulties.
See working example below:
$('html, body').animate({
scrollTop: $("#section2").offset().top - $("#nav").height() // minus the nav height
}, 1000);
body {
margin: 0;
}
nav {
background: black;
height: 10vh;
width: 100%;
position: fixed;
}
section {
height: 100vh;
}
#section1 {
background: red;
}
#section2 {
background: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav"></nav>
<section id="section1">Top</section>
<section id="section2">Top</section>
To know the height of any element :
Go to the Inspector (Ctrl+Shift+i), select the 'nav' element and on the right side, click the box-model. This will give you the height and width of the selected element.
In JavaScript, to get the height :
$("nav").height();
Related
I have a footer that contain the user name. I want to show it always on the bottom of the viewport. Like a fixed bottom bar but only on my sidebar.
I use the function
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
$('#footer').removeClass('invisible');
}
this inside:
$( function () {
setFooterStyle();
window.onresize = setFooterStyle;
}
But because I use a sidebar I thing the margin-top will place the footer the amount of pixel under the sidebar and not under the page top. So it is somewhere at the bottom of the document and I have to scroll to see.
Any idea what I do wrong to keep the text always on the bottom of the viewport, while resize ans while scroll?
The general term for what you are trying to do is "Sticky Footer". The trick is to make a wrapper div for your content above the footer that takes up 100% of the height of the viewport, then to use negative margins on the footer to move it up the same amount as the height of the footer. Then the footer is always at the bottom of the viewport. Then you need to add padding to the bottom of the content so that it never gets covered by the footer, now that the footer is not taking up space in the regular flow of the layout.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
https://css-tricks.com/couple-takes-sticky-footer/
I can't solve one problem, but maybe someone will be able to find a solution?
On the left is content area (default width=70%). On the right is menu area (default width=30%).
When I scrolling page width of content becomes 100% and menu disappears:
.down .widget-area{
width: 0;
}
.down .container{
width: 100%;
}
It's good.
But at the beginning of the page there are links to few anchors:
GoTo Header 1
GoTo Header 2
GoTo Header 3
When I click on a link "GoTo Header 1" everything is working properly.
But if I click on the link "GoTo Header 2" moves to the wrong position (under than the header title) because the script changes the width of the content area.
Sample: http://jsfiddle.net/7uouhs6y
Please, any ideas?
document.onscroll = function(){
document.querySelector("#content").className = window.pageYOffset >= window.innerHeight ? "down" : "up";
}
According to your function above,when it's applying 100% width when you scroll down and offset is greater than innerHeight.To avoid that you should keep width to 70%.
Instead of this
.down .container{
width: 100%;
}
Use this
.down .container{
width: 70%;
}
Also don't specify height for left div,make it auto adjust according to content.
.container{
float: left;
background: red;
/*height: 300%;*/
}
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...
I got an element with a vertical scrollbar via overflow: auto. When I scroll vertically inside it and reach the bottom, the window starts scrolling instead, due to the page content being longer than the height of the window. Can I disable this behavior?
// CSS
#container {
width: 100px;
height: 300px;
border: 1px solid #000;
overflow: auto;
}
// HTML
<div id="container">
<div>Foo</div>
...
</div>
// Other content, stretching out the page vertically,
// forcing a scrollbar on the window
Example: http://jsbin.com/zimabuco/1/
Setting the overflow of the body to hidden when the container is being hovered seems to work well.
$('div#container').mouseenter(function(event) {
$('body').css('overflow', 'hidden');
}).mouseleave(function(event) {
$('body').css('overflow', '');
});
See the following example, you'll see the scrollbar disappear when the div is hovered.
Example http://jsbin.com/sihihewi/3/edit
This will disable the window to scroll when you hover over the list:
$(document).ready(function(){
$("#container").hover(function(){
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
})
});
});
I have a div that is fixed at the top of the page, which holds the navigation to the website. It has a height of 175px. This DIV will remain on show as you scroll down the page.
I would like this div to shrink to a height of 90px when the user has scrolled down the page 175px and remain at 90px as they scroll down the page. When they scroll back up to the top, I'd like the DIV to grow back to its original 175px height.
I'd like this to animate when doing so (preferably slide up and slide down) and would prefer to use CSS3 to do so...
Here is a fiddle of what I have so far but because I'm a query noob, not sure how to go about things… http://jsfiddle.net/bnsUB/
EDIT:
I forgot to mention that I also have content within this DIV that will need its paddings etc. adjusted whilst the container slides up/down. So if those padding values could shrink/grow as well then that would be an added bonus
You need to trigger an action based on the current $.scrollTop() value of the window.
Something like:
$(document).scroll(function(){
if ($(this).scrollTop()>175){
// animate fixed div to small size:
$('.wrapper').stop().animate({ height: 90 },100);
} else {
// animate fixed div to original size
$('.wrapper').stop().animate({ height: 175 },100);
}
});
Here goes:
http://jsfiddle.net/bnsUB/4/
If you want to animate any other thing (such as paddings and margins), just add them as values to the object you pass to the .animate() function. ( for example - { height: 175, 'padding-top': 20, 'margin-top': 10 } etc. )
$(window).scroll(function()
{
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
$('#tt').animate({height:'90px'}, 500);
}
});
Here is a solution in vanilla JS and CSS animation:
JS:
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 175 || document.documentElement.scrollTop > 175) {
document.getElementById("header").classList.add("narrow");
} else {
document.getElementById("header").classList.remove("narrow");
}
}
CSS:
#header{
transition: 0.2s;
height: 175px;
}
#header.narrow{
height: 90px !important;
}
#header .anyelementclass{
transition: 0.2s;
}
#header.narrow .anyelementclass{
/* any style here */
}