I'm trying to fix #fixed_header_bottom div right under #fixed_header_top div after scrolling 100px down but failed to do so. #fixed_header_middle div obviously will appear and disappear when scrolling up and down and only #fixed_header_top, #fixed_header_bottom and #body_block will be visible when (for example scrolling down come to an end).
JSFIDDLE is here
In the second image, #fixed_header_middle disappeared completely but will start appearing when scrolling up.
Thanks
First, you need to set a top style for your headers so they are in the correct position, you should think about a more robust way to do this.
Another way to consider doing this is to make a hidden clone of your bottom header.
Then, simply hide/show it when the scroll position is correct. This method avoids any funny business with the scroll bar changing size and/or position as the element is taken in and out of the scrollable portion of the page (because the original is still there):
JSFiddle Demo
An even better way is to simply make a placeholder that you show/hide as the bottom header is fixed/un-fixed:
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't ever see me</div>
JS:
$(document).ready(function () {
$(window).bind("scroll", function (e) {
if(!$('#fixed_header_bottom').hasClass('fixed')) {
if ($(document).scrollTop() >= 100) {
$('#fixed_placeholder').show();
$('#fixed_header_bottom').addClass('fixed');
}
} else {
if ($(document).scrollTop() < 100) {
$('#fixed_placeholder').hide();
$('#fixed_header_bottom').removeClass('fixed');
}
}
});
});
CSS:
#fixed_header_bottom, #fixed_placeholder {
display: block;
width: 100%;
height: 50px;
background-color: #11DD55;
}
#fixed_placeholder {
display: none;
}
.fixed {
position: fixed;
top: 50px;
}
JSFiddle Demo
This code works as it should.
Your problem is that you didn't set any top property, so it stays on its original top position.
Same Fiddle with jQuery 1.8.3 (as 1.10 don't handle scrollTop() method for IE) ;): http://jsfiddle.net/h8H6N/4/
I added top: 0; to the header top, and top: 50px; to bottom header, assuming that's the render you're looking for.
Related
I have a main menu at the top of the website which when the user scrolls, changes and becomes more compact.
I was achieving that by checking scrolling events and whether we're at the top or not.
This is the code that was working:
/*Defines how the 'main menu' will be displayed when we scroll down (if) and how it will fallback to original look when we're up again (else)*/
$(document).ready(function(){
if ($(window).width() > 480){ //not on mobile, then:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 0) {
$('.visible-bar-container').css("position", "fixed");
$("#white-logo").css("display", "none");
//...etc
} else {
$('.visible-bar-container').css("position", "absolute");
$("#spread-out-menu").css("display", "flex");
//...etc
}
});
}
});
Mid project, the client decides that he wants the sections of the homepage to have a 'smooth scroll'. Long story short, I managed to do that after giving the whole homepage a CSS of position: absolute.
In case it matters, here is the whole CSS added to my homepage (which falls inside an element with id='main'):
#main {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
The problem is that now, the js code no longer works. (I believe that when the whole page has position absolute, checking for scrolling events no longer works-?). How then, can I check if the user has scrolled?
I might try checking whether user has moved past first section (through seeing if the div is visible in the viewport), but I would prefer the menu to become compact once we started moving down, not after the whole section has been moved past. So is there a way to check scrolling in this case?
I am the OP - so the answer was provided by Sim1-81 in the comments above. The trick was to change the third and fourth lines in the javascript:
...
$("#main").bind('scroll', function () {
if ($("#main").scrollTop() > 0) {
...
Where #main in my case is the id of the of page which I set to be 'position: absolute'.
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using a pure css approach. However, I'm learning jQuery and I wish to use the .scrollTo() method to achieve this.
When the panels were stacked one below the other (i.e vertically), I was able to obtain the top offset of each panel and scroll to their position nicely.
With the horizontal variation, I'm having troubles to obtain the left offset of the panels. I get a left offset of zero for all of them. If my logic is right, say the viewport is 1920px wide, the 2nd panel's left offset should be at 1920px, the 3rd at 3840px etc.
From the information I've gathered so far, it's because the panels are outside the viewport. And indeed, I've applied a width of 20% to the panels so that they were all visible in the viewport then I tried to alert their left offset. They were prompted to me successfully.
So how do I get around this issue ? It might seem like I'm reinventing the wheel but like I said, I'm learning jQuery so I need to understand why it's behaving as such and how I can solve this. Any help will be highly appreciated :) Below are snippets of what I have so far.
Thanks.
The Markup:
<div class="mainWrapper">
<section class="panel" id="panel-1"></section>
<section class="panel" id="panel-2"></section>
<section class="panel" id="panel-3"></section>
<section class="panel" id="panel-4"></section>
</div>
The CSS:
.mainWrapper, .panel {
position: relative;
height: 100%;
}
.mainWrapper {
top: 0;
left: 0;
}
.panel {
display: inline-block;
background: rgba(255, 255, 255, 1);
}
The Javascript:
$(document).ready(function() {
var $panelWrapper = $('.mainWrapper');
var $panels = $('.mainWrapper').find('.panel');
var $panelScrollPos = new Array();
$panels.each(function(i) {
//This is where I need help. It's not working
$panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);
alert('Panels position are: ' + $panelScrollPos[i]);
});
});
Please note that I have used .width() method to set the width of
.mainWrapper and .panel elements. I haven't included it in the snippet as it is working.
to be able to set your inline-block elements on a single line , no matter the width of the wrapper you should reset the white-space propertie:
#wrapper {
white-space:nowrap;
width:100%;
}
.child {
display:inline-block;
white-space:normal;
width:100%;
}
your fiddle updated : http://jsfiddle.net/n3e6xzbj/
You can try the getBoundingClientRect.
The result of that call has a left position which probably is what you seek.
I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.
I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.
Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:
Would love to hear from someone who has the solution.
Thanks! :)
Here is a start http://jsfiddle.net/ZtGK6/
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.
HTML:
<div id="theDiv">Now I'm visible</div>
CSS:
body, html {
height: 200%;
}
#theDiv{
top: 30px;
left: 20px;
display: none;
background-color:#FFF000;
width:200px;
height:200px;
}
Javascript:
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("#theDiv").fadeIn();
}else{
$("#theDiv").fadeOut();
}
});
Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/
$(function() {
var theDiv = $('#myDiv'),
scrollPos = $('body').scrollTop();
if ( scrollPos > 100 ) {
theDiv.fadeIn(500); // 500 milliseconds
} else {
theDiv.fadeOut(500);
}
});
I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.
I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden.
The scrollTop property will stick to 0.
Also, I don't want to show and hide the div back, which causes flickering.
If anyone knows how to do it, it'll be really helpful.
Thanks!
You can save the scroll using jQuery's data function.
function SaveScroll(val)
{
$(the_element).data("Scroll", val);
}
function Show()
{
var element = $(the_element);
// prevent from showing while scrolling
element.css
({
position: "absolute",
top: "-50000px",
left: "-50000px",
display: ""
});
// Scroll to the position set when it was hidden
element.scrollTop(element.data("Scroll"));
// show the element
element.css
({
position: "",
top: "",
left: ""
});
}
This might do the trick
You maybe can just use visibility: hidden instead of display: none. The visibility keeps the element where it is. I believe it is the exact same thing as opacity: 0, but it is a cross-browser solution.
To prevent div flickering and fix <div> unavailability for scripts you can use position hiding instead of "display: none;":
.hidden {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
My question was not complete. The div is not hidden on his own. It's part of a container div, which is hidden. The inner div displays with his parent.
<div class="container hidden">
<div id="some_div">Content</div>
<div id="my_div">I wanted to scroll this one</div>
<div id="other_div">Content</div>
</div>
We use jQuery came up with a custom "onShow" event.
So now we can do this:
$('#my_div').bind('show', function() {
handle_scrollTopOffset();
});
When the show event is bound, it adds the class .onShow to the div. And the jQuery.fn.show() function has been overridden to trigger the 'show' event on the childs which have the .onShow class.
Thanks everyone for their suggestions. I'm sorry I provided a uncomplete question. I'll give all the details next time.