I have <div id="naujienos">some content</div> and you can find it in the middle of page. All I want is: this div to become fixed position right after I scroll on it. When I scroll back to top it's relative again.
I mean there is interval where that div container has his position fixed.
Sorry for my english. Really looking for answer and thank you in advance!
Look at this: http://jsfiddle.net/5PQ36/1/
You can do this with jQuery...all you have to do is to set scrollTop:
scrollTop() > 300
scrollTop() < 600
In this example, your div will be displayed when you scroll 300 from the top and it'll hide when you reach 600 from the top, same thing when you scroll up.
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 300 && $(window).scrollTop() < 600) {
$('#naujienos').css("position", "fixed");
} else {
$('#naujienos').css("position", "relative");
}
});
});
Related
I am using a fixed navbar with bootstrap 4. When using fixed-top navbar, content below it is hidden by the navbar because its position is fixed. I had to give padding-top: 65px; on the body, to make the content appear below the navbar.
I have internal links so clicking on a navbar anchor positions the page on the section relative to it. However, because I used the padding-top trick, the position is 65px below the top of the section. Is there a way to solve it so that position returns to the top of the section?
You should not add from the first " fixed-nav" class. you can add this in scroll event of jquery.
$(window).on('scroll', function () {
var scrollTop = 20;
if ($(window).scrollTop() >= scrollTop) {
$('nav').addClass("fixed-nav");
}
if ($(window).scrollTop() < scrollTop) {
$('nav').removeClass('fixed-nav');
}
});
this add fixed-nav in user scroll down in your site.
On click of a link, I set the padding top of the body to 0, and on hash change event after the page positions on the section relative to the inline link, I set back the padding to 65.
$('.nav-link').click(function () {
$('body').css('padding-top', '0');
});
window.onhashchange = function () {
$('body').css('padding-top', '65px');
};
$(document).ready(function() {
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':+top_pad+'px'});
$(window).resize(function(){
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':top_pad+'px'});
}) ;
}) ;
This will make your first element after header, lie below header.
I used the property navbar-fixed-top to fixed my navbar to the top. But I have an other fixed element we don't see.
This is my fixed navbar and under it, the fixed element I want to see.
What is happening is that my element (just call it "line") is fixed by the options but the position of the navbar is not absolute, so the line pass under the navbar and when I scroll down, the line is well fixed but it's hidden by the navbar. I don't know if it's clear but I want this two element to be glued and not superimposed.
How should I do ?
EDIT :
My jsfiddle : http://jsfiddle.net/5Zv8h/13/
If you try to remove th enavbar, you'll see that the first line stays on the top of the page. With the navbar, it's hidden.
I have written script to fix this, add this to Your code:
js
var navheight = $(".navbar-fixed-top").innerHeight();
var offtop = $(".ht_clone_top").offset().top;
$(window).scroll(function(){
var scrolltop = $(window).scrollTop();
if(scrolltop + navheight >= offtop){
if(!($(".ht_clone_top").hasClass("affixed"))){
$(".ht_clone_top").addClass("affixed");
}
if(offtop>= scrolltop){
console.log("now");
$(".ht_clone_top").css({
"top": scrolltop - 40
});
} else {
$(".ht_clone_top").css({
"top": 50
});
}
} else {
$(".ht_clone_top").removeClass("affixed");
$(".ht_clone_top").css({
"top": 0
});
}
});
css
.affixed {
z-index: 99999;
position: absolute;
}
demo:
http://jsfiddle.net/5r9p380n/2/
Is it possible to make DIV bigger when content of the page is scrolled? I have chatbox with position:fixed on the right side of my page. My CSS for the chat box is height:100% right:0 bottom:0 top:50px. The top:50px is because I don't want it to hide the navigation bar on top of my page. Now the problem is, that when I start scrolling the page, the navigation bar obviously disappear from sight and there is 50px high blank space on top of my chatbox. What I want is that when I start scrolling the page, the chatbox should take the whole 100% of the screen, so that there is no blank space on top of it.
you may do this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.chat_box').css({top:'0px'});
}
else {
$('.chat_box').css({top:'10px'});
}
});
});
http://jsfiddle.net/5tnygmrz/1/
demo - http://jsfiddle.net/victor_007/cq1e8c1t/
i think you will need javascript
window.onscroll = function (e) {
var topscroll = window.scrollY
if (topscroll > 50) {
document.getElementById('fixed').style.top = 0
} else {
document.getElementById('fixed').style.top = 50 + 'px'
}
}
Someon knows a plug-in to get a floating widget with a form/html like this website
http://teambox.com/
When you scroll down a "form sign up floating bar" appears.
Thanks in advance!
For this use a div, position fixed and top: 0px and place whatever you want inside. Have the div hidden and use something as the following to show after a certain height.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 300) {
$('#your-div').fadeIn(200);
} else {
$('#your-div').fadeOut(200);
}
});
No reason for a plugin.
Is there a way to scroll the content of an element that has an overflow of hidden to the top?
Example use case:
Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.
Any ideas here would be great.
I believe it is not possible with CSS.
You can try to look at element.scrollIntoView.
Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.
Do you mean something like that?
http://jsfiddle.net/8pvjf/
It has to do with jquery indeed
$(document).ready(function(){
$('.background').css('font-size',($(window).width()*0.1));
$(".blow").each(function(){
});
$('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
$(this).addClass('blow')
$(this).removeClass('overflow')
} else {
element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
$('body').animate({ scrollTop: element.offset().top });
}).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
}
});
$(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));
});
Have fun toying with those codes as much as you want.
Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)