I'm having an issue with my website. What is happening is:
My goal is to scroll down (using mouse wheel) all the way down to, to the bottom of the page.
I do that, but about half way, I can't scroll anymore. I keep using the scroll wheel and it still won't go down.
I move my cursor a TINY TINY bit to the left, right, up or down and I can scroll again.
What might be causing an issue like this?
Related
In order to scroll horizontally through a content box, you need to hold down shift. I fear many people visiting the site won't know to. Is there a way to make it scroll when you just use the scroll wheel without needing to hold down shift as well?
You could capture the mouse position and scroll the pag when the mouse is close to the browser window's edge. But you should use javascript. Not html or css for what you want.
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...
In that Web page, we have two elements:
We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.
But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.
I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.
How can I do so?
I hope I explained myself correctly.
If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.
PS: I want a kind of result like this:
Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.
I have a layout and the problem I'm having is if I select over anything, even just clicking and holding the background and drag my mouse right, the whole page moves to the left, except the background.
I've tried everything I can think of and was wondering if anyone knew what it could be? I thought it could be a width problem but I've checked it all out and can't find anything.
I just installed buddypress on my wordpress powered website and I would like to prevent the admin bar from following the screen as you scroll down. How can I make it stay stationary at the top of the page and allow it to go out of view as you scroll down?
Thanks for any help.
Without knowing anything about how they implement it... Items staying put in the window can be handled through css with a position: fixed; top: 0 type syntax. Changing the position to absolute is probably the most straightforward change; it will change to just being stuck along the top when scrolled to the top instead of stuck along the top always. Or there are a number of ways to do it through javascript. Do you know how it's working? Try inspecting the element in a browser (firebug in firefox or chrome) and checking what css rules are applied to the header. Or post a url, at least.