I am programming a mobile site and I want an element to be fixed at a certain position on the screen and stay there even as the user scrolls down the page. I can't use position:fixed as far as I know because iPhone doesn't support it. How would I accomplish this? I do not want to use jquery mobile.
you might want to make use of jquery mobile, in particular check out the section "persistent footer navigation bar"
http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html
Im ganna start off by saying iOS5 will have support for fixed.
but for now, you're ganna have to use javascript to move it.
Lets assume ur footer's ID is "myFooter"
window.addEventListener(
'scroll',
function() {
document.getElementById('myFooter').style.top =
(window.pageYOffset + window.innerHeight - footerHeight) + 'px';
},
false
);
that should move it when you scroll (footerHeight is your footer's height and can also be retrieved with document.getElementById("myFooter").style.height if the style object was used to define the height
If there is something I have not forseen in the above solution, you can always divide the viewport into two sections, the content and footer. Just absolutely position the footer and use the touch events (touchmove,touchend,targetTouches etc) in combination with scrollTo (scrollTo(destination, duration)) on your content area
Related
So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?
there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/
If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/
I am trying to make a webpage which scrolls content, and when it reaches the bottom of the content continue to scroll the bottom off the page, while scrolling the top back on - so the bottom and the top will be on screen at the same time. Like the <marquee> tag, but vertically.
Only stuff I've managed to think up so far is (on load I use setInterval() to run this every 75ms)
function doScroll() {
window.scrollBy(0,1);
if($(window).scrollTop() + $(window).height() == $(document).height()) {
window.scrollTo(0,0);
}
}
http://www.quackit.com/html/codes/html_marquee_code.cfm
Take a look at this. It has 'upward' in the middle of the page.
You could use the CSS3, specially the property marquee-direction.
Together with marquee-style, marquee-speed and marquee-play-count, you can create the effect that you want.
See for example http://www.quackit.com/css/css3/properties/css_marquee-direction.cfm
Remember that HTML is semantic, but something moving isn't, so you should use CSS/JavaScript instead of <marquee>. Moreover, this element was never added to the HTML specification and support for it varied widely across browsers (http://webdesign.about.com/od/css3tutorials/a/marquee-in-css.htm)
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
I'm working on a rather full-on site using jQuery (if the solution is not using jQuery, that is also fine).
The website is built using sections that resize to the height of the window using:
$(window).resize(function() {
$("section").height($(window).height())
}).resize()
This part is working brilliantly. I have disabled scrolling by taking the overflow off the body and html elements and the user can travel through the site using relative links (with localScroll).
My issue is that once the user has travelled to a section and then resizes the window, the body is no longer in line with the top of the section.
Is there a way to make the window stick to the top of an element no matter what?
Take note of which section is current. When the window resizes, you can then set the window's scroll top to the top of that section. For example:
var currentSection = $('section:eq(0)');
var jqWindow = $(window).resize(function() {
$('section').height(jqWindow.height());
jqWindow.scrollTop(currentSection.offset().top);
});
I have a sidebar on my page that I want to always be 100% of the container size. Sadly, I can't tell the element to do this via CSS alone as the page has a variable height due to dynamic content.
Is it possible to use jQuery to find the height of the content container, and adjust the sidebar height to match it?
I found a few jQuery plugins that kind of do what I want, but feel they are over complicated (and I can't seem to get them to work anyway!).
Assuming the id of your container is "container" and the id of your sidebar is "sidebar", you could try the following (untested!)
$(document).ready(function() {
$('#sidebar').height($('#container').height());
});
This should (on document load), resize the sidebar height to the same as the container height.
I'm going to continue on from Damovisa's answer.
$(document).resize(function(){
$('#sidebar').height($('#container').height());
});
However, this could fire an awful lot if you resize the page a lot. You could try this
$(document).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
$('#sidebar').height($('#container').height());
}, 100);
});
In the second example, it will only resize 100 microseconds after resizing.
This is also assuming that $(document).resize() will be triggered when the page size changes. You could always wrap it in a function, and call it on completion of any slideDown() etc