I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.
Related
I apologize for the poor wording of my title, I am not sure how to explain my question in the most concise way.
I have an isotope JavaScript plugin that filters I use to filter some elements. The plugin works fine, however I added my own "No results" text that appears when there are no results. It functions correctly, however what is not working is the animation.
At the moment, if you are scrolled down on the page, and the results go from multiple shown results to 0 results where my "No Results" code appears, there is an animation glitch where my footer (which I have set using flex display to be at at the bottom of the screen) moves up from the bottom, and then snaps into the bottom.
I have worked out that one possible solution for this may be to give the "No results" text a height that would make all of the contents on the page add up to 100vh. Is there a way to calculate it so that it will be the calculated height of what is left on the page to ensure the min size of the contents of the page are 100vh.
Here are some screenshots of the issue:
This is how it should look the entire time when there are no results. However this only happens at the end of the animation
This is what happens during the actual animation. The page resizes in a strange way where the footer first moves up, leaving the white space at the bottom and only then does it snap down into position.
Attached is the live code of my site, to see what I mean, please first scroll down and then click the "Financial Sustainability" checkbox.
Link to live code
If anyone has any advice at all about this, even on how to explain the question better, I am open to any feedback and suggestions and I really appreciate all of the support.
I am trying to do a specific way to move an image (just an image, not background) to a certain spot when you scroll. So say I load a page, the page loads then an image slides to the left of the page and when you scroll, the image slides to the middle or bottom or where ever you want when you start scrolling the page. And the image stays they there by a set of texts or info. I have tried many things such as:
stop().animate({"top":(window.scrollY)
I cannot get it to stay there at the spot when scrolling to that specific spot, if you keep scrolling down, the image continues to scroll down when I scroll, and I am not sure how to stop the image after a certain point.
Then I tried this:
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var a = $(window).height() - 100;
$('#scrolling').animate({
However, I cannot get it to work, it doesn't go back up to top when scrolling back to the top.
Any thoughts on how I would get the image to float in to the center or top or even on the sides and then move to a spot when scrolling down? Am I on the right path or am I totally going about this incorrectly? It feels like I am missing something here, and I am not sure what it is.
I thought I could do this in HMTL5 with animation protocols, but I do not think I can acheive that, and I know CSS3 is robust, but it is also very choppy, so I think JQuery or JavaScript is the way to go, and I can get it partially working but not fully. Any thoughts?
I have searched this site and I cannot find what I am looking for. These are the sites I have found that are similar: Animated Scroll Image to a particular position on a window and this: How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?
But I need an image to move to a spot. Are these links in the right direction? Are the example codes I gave somewhere to start with?
Take a look at Skroller, it is a JS library (not jQuery dependant, it needs require js though) that allows you to define certain actions.
Basicly you add some data elements to a div, one that says at what pixel (of scrolling) it should start animating, when it stops, and what it does (goes to the middle of screen for example) dsuring that scroll.
Scrolling back up works well (used it in a project of ours)
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.
So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?
Thanks!
Danny
To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties.
also, make sure you hide the div when the animation ends.
$('a').click(function(){
$('#thediv').parent().css('overflow','hidden');
$('#thediv').animate({'top': '+=500px', opacity: 0},function(){
$(this).hide();
});
});