I don't know how am I going to explain this one, I am building a one-page layout website but instead of the 'usual' scroll down effect, I want something like this:
www.xsbaltimore.com
You have to scroll up in order to see the other sections, but I am wondering how to do it. Thank you!
A nice way to do it to make sure people see the page has content by scrolling up would be to animate it.
$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
This would scroll the page over 1000 milliseconds (1 second).
But lots more information over here... Scroll to bottom of Div on page load (jQuery)
Use jQuery's .scrollTop() to set the scroll position to the bottom when the page loads. See the documentation here.
As a side note, having users scroll up is not intuitive, so just keep that in mind when you are doing your usability testing. Make sure that it is obvious enough that they need to scroll up.
Related
While working on a web project, I suddenly noticed a random horizontal scroll pop-up near the banner area. I tried checking on the dev tools to see what was causing it but I couldn't find any lead. As you can see in image 1, the horizontal scroll pops up, but once you scroll down just a little bit. It starts to disappear (seen on image 2).
I hope someone can help me with this. This site needs to get deployed soon as it has a deadline.
While disabling the horizontal scroll is quite easy to implement, it is not recommended to use overflow-x: hidden;.
There is always a reason to why the site shows a horizontal scrollbar. I'd suggest finding out what exactly causes that behavior and rather fix it properly than trying to "hack" your way around it by disabling horizontal scrolling in itself.
You can simply add overflow-x:hidden using css but I must say it is not a good way of implementing it. There is a reason browsers has horizontal scroll.
So I suggest to find out the issue in your code, probably there should have a min-width or a fixed width in some element which cause to show a horizontal stroller in smaller device width.
So go to inspect elements and delete each of the wrappers one by one until you get the horizontal stroller disappear. This is the easiest way I follow to find the element which has the issue.
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
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!
Can we change the appearance of scroll bar? I mean we want to change the image of the scroll bar, so it can match our web theme. more specifically, i'm pointing at the scroll bar in
<div style=overflow:auto>
If it can't be done, then is there some other way to make our own "scroll bar", which use our own image?
Perhaps if we're insane enough, maybe we'll do it like this.
We make a bunch of <div> which contain an image of up arrow, scroll, down arrow, etc. And then we applied some function to each of them. off course the width of scroll will depend on the amount of the content.
Can somebody help?
Check out this site - I've heard good things about the method implemented, although I have never really bothered to create my own custom scroll bars.
You should be able to style in line with your own theme with a bit of experimentation.
There are plenty of custom scrollbar available in the jQuery plugin here is some
http://designhuntr.com/custom-jquery-scrollers/
I would suggest http://baijs.com/tinyscrollbar/