I tried to do a minimal version of the problem i am having. In short i am doing header with navigation that always sticks to the top of page when scrolling.
Now the problem is if you try and click on a section in the navigation, when you get scrolled to the section the navigation blocks half the content at the top by getting in the way.
This means the user has to scroll back up a little to see the content properly. I am using lorem ipsum as content replacement there.
How would i adjust where my browser position lands when the user clicks the navigation button so i can position the window correctly?
https://jsbin.com/hopiqe/edit?html,css
Eli-
Using HTML/CSS only, you'd have to do a hack like Kommodore suggests to get this working properly. Your really need JS to do this right.
You can do this with jQuery and a little foresight:
// Button 1 is what you click to start the interaction
$(".button1").click(function() {
// Using jQuery Animate and ScrollTop...
$('html, body').animate({
// We point user to div1
// We have an offset from the top of the window minus 50px
// `-50` should match the height of your header
scrollTop: $("#div1").offset().top-50
// 500 is milliseconds to do the `Animate` interaction
}, 500);
});
You could also use a combination of jQuery plugins called ScrollTo and LocalScroll.
I wired up a working CodePen that builds off the code you provided. The JS probably needs more tightening but you should get the idea.
The easiest way should be adding another div as a placeholder with height: 140px in front of each div (which then has to be called instead of the div) or using margin-top: 140px for each div.
Related
I have a fixed div set at the top of the browser window, with z-index:2, and with text in this div.
My website page is a single page at z-index:1, and with multiple "<section id=...>" sections in it for each website "page".
I'm using javascript and jquery to display each section id for the user, and for the requested section to come up flush with the bottom of the top fixed div.
For this, I am using the statement:
$('html, body').animate({scrollTop: $('#sectionid').offset().top-xx)}, 0);
- where "xx" above is a number.
I can manually edit and change the "xx" number in my program to set the page section to whatever top I need, and this all works fine.
However, I am also using; "$(window).on('resize', function() { .." in my program, to reset/recalculate the section top to match the bottom of the fixed div. This is because the fixed div changes in height whenever the browser window is re-sized by the user. That is, the text in the fixed div will re-flow onto the next line when the browser window is made smaller etc..
So I tried using a variable name for the "top-xx" value, such as ".offset().top-myPageTop". But this does not work and the sectionid top always lands on "top-0" under the fixed div.
After much trial & error, I came up with this solution:
$('html, body').animate({scrollTop: eval('$('#sectionid').offset().top-' + myPageTop)}, 0);
- where "myPageTop" is a variable that is set/reset by the "$(window).on('resize'.." function mentioned above.
For my website, the above last jquery statement works just fine. But I am left wondering that maybe this is not really the correct way of doing this. I have looked through the jquery documentation and searched this site (and others), but I could not find much on using "top-xx" with a variable name in the above statement. Is there a better way of doing this?
I am currently runnning a test site on Wordpress.
I have my page with several divs which have IDs and a menu on top with anchors which lead to those IDs.
My header is sticky, so when I click an anchor, it navigates to the div ID, but the beginning of the div stays hidden below the header. I would like it so that when I click an anchor, it navigates to the div, but few pixels above it.
I managed to do that, though with a little problem.
(function($,document){
$("a[href^='#']").click(function(){
var url = $(this).attr('href');
$('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
});
})(jQuery);
What happens is:
I click an anchor with a href="#someid"
My browser navigates to the #someid with offset of - 90px (It works perfectly so far)
Then my browser scrolls 90px down, to the position where the div #someid starts at the beginning of the viewport (and behind the sticky header).
Finally my URL changes to http://example.com/#someid
I just want to delete step 3. Any help is much appreciated.
Update:
I just found out my theme has jQuery "One-page-nav" plugin installed and it is interfering. Still trying to understand how it works and if I can modify it to have offsets
I was having the same issue and in my case I solved it by adding padding-top and a negative margin-top of the same value:
.some-class {
padding-top: 4em;
margin-top: -4em;
}
By doing this my element looks like it's on the exact same location but the browser finds it sooner while scrolling. You can set these values to the height of your sticky header or play around to make sure the heading is exactly where you want it to be.
I hope I'm explaining this in a way that's understandable... It sure makes sense in my head :D
I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?
I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.
Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!
I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})
If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.
I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/
I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.
I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.
The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.
I've used the following code with some success:
jQuery().ready(function($) {
var $scrollingDiv = $("#sidebar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
But it jumps too far when scrolling down.
(original position)
(scrolled a single mousewheel click)
When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.
Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.
Is there a fix that can be applied to this code, or a better way of approaching this?
---------------------------------------------------------------------------------
EDIT: position:fixed Problem
When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:
Here is Firebug's read-out of the CSS styles attached to this element:
You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.
Consider this simple markup:
<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>
And this would be all the javascript you need:
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:
#sidebar.fixed > div{position:fixed;}
I put up a really simple demo here: http://jsfiddle.net/QZyH3/
You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.
why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top