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
Related
I'm using the Perfect Scrollbar jQuery app (http://www.yuiazu.net/perfect-scrollbar/) for this site:
http://thehummingbirdplace.com/
The scrollbar shows up when you hover over the News section, but it won't scroll down to reveal the content. I've used this scrollbar before successfully, so I'm stumped as to what is different now. I haven't been able to replicate this on a simpler page, when I experiment on another page it either works or just vanishes, so I'm not sure why it is successfully showing up, yet not scrolling on the main page.
I've tried taking out the second use of jQuery on the page too, just in case, but I get the same result.
Any help would be appreciated!!
The error was in the set up for the jQuery.noConflict(); command and has now been fixed
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 am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.
I'm working on the following project and I'm having a small problem with my entire page shifting about 5-10px when the page content goes beyond a certain lenght.
http://www.thewaymultimedia.com/IML/
I'm not sure what I"m missing, I've spent the past couple of hours looking at my CSS to see if I have an extra padding or margin but I cant narrow it down. Anyone a pro at CSS familiar with this problem.
If you go in the about menu and then click on 'board of directors" menu and you will see what i mean. If i reduce the content it will stop, but this page will require quite of bit of vertical real state.
Any suggestions. The website is using WordPress by the way
Is it possibly because it is going beyond the length of the window and is, therefore, needing a scroll bar?
That is due to the scrollbar...
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/