i would like to fix/stick the header "top" row (NOT middle and bottom rows) during the scroll of the page. I also created a class for the top row. This is my header code:
enter image description here
Please add your code in the questions and do not paste the link to a screenshot. It would help to get better and faster answers, if you also add your css code, because the styling is done within the stylesheet.
But I think I got your problem.
If your header is at the top of your page, it is a simple css property you add to your class in the stylesheet:
.riga_sup {
position: fixed;
top: 0;
}
Take a look at the example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu
If your header is not at the top of your page, but you want it to be fixed if it is at the top position after scrolling, you will need a little bit of javascript to add the class with the "position: fixed;" styling when the scroll reaches the the element. In the example the header has a ID of "myHeader".
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("header");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
In your CSS you give the properties to the "sticky" class:
.sticky {
position: fixed;
top: 0;
}
Here is an example: https://www.w3schools.com/howto/howto_js_sticky_header.asp
Related
I'm trying to hide the sticky nav bar on scroll down and show it again whilst the screen is being scroll up. At the moment the sticky nav bar is still operating as normal without this affect.
Not sure what I need to do to fix it:
HTML:
<header id="site-header" class="header-footer-group _mPS2id-t mPS2id-target mPS2id-target-first mPS2id-target-last" role="banner">
</header>
CSS:
#site-header{
opacity: 0.9;
width:100% !important;
z-index:99999;
position: sticky;
position: -webkit-sticky;
top: 0;
height:166px;
}
.navup{
transform: translatey(-166px);
}
Javascript:
<script>
var my_window = window;
var position = my_window.scrollTop;
my_window.scroll(function () {
if (my_window.scrollTop > position) {
$('#site-header').addClass('navup');
}else{
$('#site-header').removeClass('navup');
}
position = my_window.scrollTop;
});
</script>
In first line of script, you should create a selector of window object, like: $(window).
After that, add parenthesis after every scrollTop occurence, like this scrollTop() since it is a method, not a property.
This should do it:
var my_window = $(window);
var position = my_window.scrollTop();
my_window.scroll(function () {
if (my_window.scrollTop() > position) {
$('#site-header').addClass('navup');
}else{
$('#site-header').removeClass('navup');
}
position = my_window.scrollTop();
});
Hello I have a shopify website and trying to implement a sticky header which changes the image position and location when some one scrolls down from header.
For that I have added the following Javascript.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("siteheader").classList.add("sticky_header");
} else {
document.getElementById("siteheader").classList.remove("sticky_header");
}
}
I am targeting the id of logo image and togelling the sticky_header class
<img id="siteheader" class="header__logo-image">
I have added the following css for moving the logo to left hand side and changing its size
.sticky_header {
float: left;
height: 45px;
width: auto;
margin-bottom: 0;
}
the above setup is working fine and its the desired requirement
but while scrolling to bottom the image size is fighting between the non sticky_header and sticky_header state and
Having the glitch of sudden change and not change in header size.
And that is happening very fast on the point where .scrollTop > 20
can some one help me to smoothen this process.
I have the following code that is adding the class "sticky" on scroll and removing the class "sticky" when the element reaches the anchor "#search-anchor".
However, I'm unable to scroll all the way down to see the full footer. Any ideas why?
https://jsfiddle.net/coldfusion/6z6q3kxm/2/
<style>
header,footer {height:50px;background-color:red;}
section {height: 50px; background-color: yellow;}
#search-anchor {background-color:blue;}
.body {height:1600px;background-color:black;}
.sticky {
position: fixed;
bottom: 0px;
width: 1000px;
margin-right: auto !important;
margin-left: auto !important;
z-index: 999;
}
</style>
<script>
jQuery(document).ready(function() {
var a = jQuery(".inline-search").offset().top,
n = function() {
var n = jQuery(window).scrollTop(),
n = n + 10;
n > a ? jQuery(".inline-search").addClass("sticky") : jQuery(".inline-search").removeClass("sticky")
};
n(), jQuery(window).scroll(function() {
n()
})
}),
jQuery(document).ready(function() {
var search = $(".inline-search");
$(window).scroll(function() {
var anchorPosition = $("#search-anchor").offset().top;
var navHeight = $(".inline-search").height();
var navPosition = $(".inline-search").offset().top;
if ((navPosition + navHeight) >= anchorPosition) {
search.removeClass('sticky');
}
})
});
</script>
<header>HEADER</header>
<section class="inline-search">
</section>
<div class="body"></div>
<section id="search-anchor">
</section>
<footer>FOOTER</footer>
If you use the instruction debugger to pause the execution of JavaScript in the console, you get exactly what #mike-mccaughan is explaining.
You script adds and removes the element .inline-searchfrom the document flow because of the CSS position:fixed;.
If you scroll down and re-add .inline-search to the document flow, the document height changes again and the scrollbar has some space, so your code that detects if we're at the bottom of the page doesn't work anymore. What happens is an infinite and very fast loop of adding and re-adding your fixed positioning: because of that, it seems as if the page "stops" scrolling before getting to the footer.
In order to create such an effect (fixed positioning upon scroll), I'd recommend using Bootstrap's affix jQuery plugin. Even further: Bootstrap recently announced that they're dropping Affix because of sticky positioning coming to CSS, so the real "future-proof" recommendation here would be to use sticky positioning with a polyfill to allow older browsers to have the same effect.
Bootstrap affix : https://github.com/twbs/bootstrap/blob/master/js/affix.js,
http://getbootstrap.com/javascript/#affix
Bootstrap drops affix : https://github.com/twbs/bootstrap/blob/87751da48232ac4ca1964c819aaf89e78a3f9e64/docs/migration.md
Sticky positioning : http://html5please.com/#sticky
Sticky positioning demo : http://html5-demos.appspot.com/static/css/sticky.html - Sticky positioning availability accross browsers : http://caniuse.com/#feat=css sticky
And a sticky positioning polyfill for older browsers : https://github.com/filamentgroup/fixed-sticky
okay here's an example of what i am trying to ask,
the nav bar of usatoday.
I'm using bootstrap affix. here's my code
<div class="header">
<div class="header-1">
<h1>this is some logo</h1>
</div>
<div class="header-2">
<h3>this is some heading</h3>
</div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
this is a footer
</div>
JavaScript
$('.header-2').affix({
});
how can I make the div header-2 to be fixed on the top, (when there is some scrolling and the div header-2 just reach the top position) as of the site I've mentioned earlier?
I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 to the top most.
thanks
See this Jsfiddle
you can check the position of the slider and add class accordingly
$(window).scroll(function () {
if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
$('#header-2').addClass('posi');
} else if ($(window).scrollTop() == 0){
$('#header-2').removeClass('posi');
}
});
use jquery look at this example
http://jsfiddle.net/5n5MA/2/
var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() { // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else { // Make it static if you scroll above
$('.fixme').css({
position: 'static'
});
}
});
Bootstrapped answer using Bootstrap.affix()
$('.header-2').affix({
offset: {
top: function () {
return (this.top = $(".header-2").offset().top);
}
}
});
This also needs CSS for the fixed positioning (see the Docs).
The affix plugin toggles between three classes, each representing a
particular state: .affix, .affix-top, and .affix-bottom. You must
provide the styles for these classes yourself (independent of this
plugin) to handle the actual positions.
.header-2.affix {
top: 0;
}
Working example at Bootply: http://www.bootply.com/S03RlcT0z0
<style>
.header {
top: 0%;
left: 0%;
width: 100%;
position:fixed;
}
</style>
I'm sorry didnt look at your problem carefully.
This may helps you Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location
I have 3 divs. When I click one of them, the div will disappear and a greeting div will appear. Got this all working, please see my fiddle:
http://jsfiddle.net/mauricederegt/pknpb/1/
At the moment this greetings div appears at a fixed position. How to make it so that it will appear above the div that was just clicked?
Is this even possible at all?
Hope someone can help me out
Thank you for your time
(ps also why are the divs forced down when clicked?)
The 3 divs drop down because .greetings has relative positioning. If you make it absolute and get the offset of the clicked element, you can position it exactly above that element and without it changing the layout of the other divs:
var offset = $(this).hide(500).offset();
var score = 'Hello';
$('.greet').text(score);
$('.greet')
.show()
.css({
top: offset.top - $('.greet').height(),
left: offset.length,
opacity: 1,
})
.stop()
.delay(200)
.animate({top: 20, opacity: 0},1000);
See fiddle
I would recommend putting each 'Hint' in a container with it's message:
<div class="hint-container">
<div class="hint"> HINT! </div>
<div class="greet"> Greetings </div>
</div>
the give the container a fixed size and relative position:
.hint-container {
position: relative;
width: 100px;
height: 20px;
}
The you can give an absolute position to the containers, make them occupy all the container and hide one of them:
.hint-container > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hint-container .greet {
display: none;
}
From here you can go on as you where doing ^.^
I hope it's clear.
Sorry, I am not versed enough to give the code in jquery for this. But, I believe you would have to send in the click event to the method handling the div with class greet. And then with position absolute set the left and top of the class greet div to the top and left stored in the event.
You can get the element's position relative to it's container using the .position(), or it's offset relative to the document using .offset().
in this case, it might look something like this:
$('.ht').click(function hint() {
var x = $(this).offset().left;//get offset relative to document
$(this).hide(500);
score = 'Hello';
$('.greet').text(score);
$('.greet')
.hide()
.css({
bottom: 20,
left: x, //add x variable here
opacity: 1,
})
.show()
.stop()
.delay(200)
.animate({'bottom':75, opacity: 0},1000);
});
however you'd probably want to make the .greet class position:absolute, and you might have to do something with the height.