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'
}
}
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'm currently looking into creating two separate logos located on the header nav section of this website.
The current navigation before scrolling along with logo is perfect to me. The fixed nav on scroll is also perfect apart from the logo will stay the same.
I have a second logo with the opposite colour to match the white background, the problem I face is what method to use when switching the image from the first to second.
My initial approach may be to use css but as far as things stand, I'm on the fence for how to deal with this, the text for the navigation styling has been fine, it's just any idea on how to switch the image to the second one that I plan on placing there.
If anyone has a rough idea to help me out, I'll highly appreciate that and take it on board.
URL: http://94.23.211.70/~cairngorm/
Something like that http://www.w3schools.com/jsref/event_onscroll.asp
<script type="text/javascript">
window.onscroll = function() {changeSource()};
function changeSource() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
$('.css_class_name').attr('src','new_image.png');
} esle{
$('.css_class_name').attr('src','old_image.png');
}
}
</script>
this is also at you general.js you can customize at this point customize it at line 210
customise the function //Sticky Menu
var sticky_menu = function(){
if( jQuery('.fly-header-site.fly-sticky-header-on').length > 0) {
var header_height = jQuery('.fly-header-site').outerHeight(),
sticky_open = header_height * 2;
jQuery(window).on('scroll', function () {
if (jQuery(window).scrollTop() > header_height + 5) {
jQuery('.fly-header-site').addClass('sticky-menu').css('top', -header_height);
} else {
jQuery('.fly-header-site').removeClass('sticky-menu').css('top', 0);
}
if (jQuery(window).scrollTop() > sticky_open) {
jQuery('.fly-header-site.sticky-menu').addClass('sticky-open')
} else {
jQuery('.fly-header-site.sticky-menu').removeClass('sticky-open')
jQuery('.fly-wrap-logo').src('http://www.vectortemplates.com/raster/superman-logo-012a.png')
}
});
}
};
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/
I want to put the div behind the scrolling header like it is for the footer.
The footer is
#rt-footer-surround {
color: #686868;
background-color: #2E244E;
height: 40px;
width: 100%;
z-index: 900;
bottom: 0;
left: 0;
padding: 10px;
position: fixed;
}
but I cannot replicate it for the header.
the site in question is here:
site with z-index issue
To use the z-index style, you must also use either position:fixed;, position:absolute;, ,or position:relative; on the same object you wish to style.
Then, you can simply use a div to represent your header, footer, and main content section as follows:
<div class="head"></div>
<div class="mainbody"></div>
<div class="foot"></div>
Or alternatively, you can use the <head>,<main> and <footer> tags instead of divs. As far as coding and visuals are concerned, there is no difference.
Also, you don't have to put a massive number on the z-index. As long as one element's z-index is greater than another one's, that element will always be layered above, whether it is 900 over 1, or 2 over 1.
Ok here is what I came up with to solve the problem. Jquery.
Essentially my question was asking for this in the first place.
If you have content in a div you can place a nav bar in that div as a position:relative i.e. relative to that div.
What you cannot do via css is have the content in that div scroll up and stay underneath the nav bar you created. Furthermore when the nav menu area scrolls beyond the top of the screen it will then disappear.
So the jquery code I used does two things. It allows you to take a nav menu bar i.e. width 600px / height 50px and place it in its relative position anywhere you like. Furthermore, when it reachs the top of a users screen it will stop/halt and allow that to be the menu that is visible while everything else scrolls underneath that menu area.
Now, I don't think this is anything really new from Jquery but what is ultra convenient is that you can define a menu nav bar in any div position you want. Have a regular menu at the top and another menu perhaps below a slider or some content further down the page.
I will share the code if that is ok with SO... I paid for it myself.
Oh and here are two websites I have employed it on.
http://isaerudition.com/study-pages &
This is for a client I am preparing his website...
// JavaScript Document
/* jQuery(document).ready(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed'),
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
jQuery(document).scroll(function(){
var height = jQuery(window).height();
var scrollTop = jQuery(window).scrollTop();
if(scrollTop>=elTop){
//add fixed
jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
}else{
//clear fixed
jQuery(el).removeClass('scroll_fixed').attr('style','');
}
})
}
})
*/
// JavaScript Document
/* jQuery(window).load(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed'),
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
var scrollTop = jQuery(window).scrollTop();
scrollFixed(el,elTop,elLeft);
}
}) */
var setInter = null;
var session = null;
setInter = setInterval(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed');
session = jQuery(el).attr('set-scroll');
//alert(session);
if(session == '2'){
jQuery(el).attr('set-scroll','2');
}else{
jQuery(el).attr('set-scroll','1');
}
if(session == '1'){
setValue(el);
}
}
}, 200);
function setValue(el){
var setScroll = jQuery(el).attr('set-scroll');
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
jQuery(el).attr('set-scroll','2');
scrollFixed(el,elTop,elLeft);
};
function scrollFixed(el,elTop,elLeft){
jQuery(document).unbind('scroll').scroll(function(){
//alert(elTop);
var height = jQuery(window).height();
var scrollTop = jQuery(window).scrollTop();
if(scrollTop>=elTop){
//add fixed
jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
}else{
//clear fixed
jQuery(el).removeClass('scroll_fixed').attr('style','');
}
})
}
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");
}
});
});