I'm currently working on my new website which happens to be my first go on frontend development. I realized links on the vertical navigation stops working after scrolling to some point of the page. I have tried all I can and have search the web, still not working. Here's the link to the website - http://preciousm.co/
It looks like the featured work sections are overlapping your header. Simply turn up the z-index on the header element and it will work again.
Related
I'm currently stumbling on a bit of a problem involving (smooth)scrolling and trying to "update" a navigation bar at the same time.
Currently I have a large webpage that has a lot of content under different headers. These headers are displayed in a navigation bar that spans the whole view width of the page, each of these elements are href's to smoothly scroll to the current position of the header.
The header the user is currently is viewing gets highlighted within the navigation bar. However I would also like to scroll this header to the front or middle of the navigation bar for easily navigating the page.
Using the following code:
nav_bar.scrollBy(scrollAmount-125,0);
All of this works completely fine until I introduce: html {scroll-behavior: smooth;} to the CSS. As soon as I call the .scrollBy() the smooth scrolling get interupted and halted before it can complete the scrolling to the element referenced by the href.
Is there any solution to fixing this problem, I tried to get the .scrollBy() to run after the scrolling is complete but have not been able to get this to fully function. The problem is with the html {scroll-behavior: smooth;} since removing this property gives the desired results for functionality but without my desired User Experience.
I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.
I was wondering if you could help.
I am currently putting together a site that requires a parallax scroll and sticky navigation.
The navigation must start below image 1 (Blue) and then stick to the top in a fixed format after you've scrolled past image 1(blue).
I have tried many options and at present, I have got the navigation to stick to the top and then reappear once image1 (Blue) has been passed - but it starts at the top.
I have tried some jQuery plugins and they have not worked, could it be the way I have got my script formatted? As some is embedded directly into the page and not an external file?
Here is my link: http://bella-web.co.uk/sticky-nav/
and would love some feedback as to how I am going to get this to work.
Thanks in advance,
Ben.
You should be able to add navigation menu that starts in the middle of the page and sticks when it reaches the top using the jQuery plugin jQuery Waypoints, the plugin doesn't just work out of the box, so please read the docs.
I need to create something like this site, I found many jQuery infinite scrolling scripts that allow you to load contents using AJAX while you're scrolling. What I need is very similar, except I want it to be horizontal and I want to set the size of the scroll bar according to the amount of contents I have. If you check out this website you'll see that you can jump from page one to page lets say 3 without loading the second page. Any idea how they do that ? their scroll bar is draggable too ! This is exactly what I need but don't know how. Any help is appreciated.
jQuery lazyload works with horizontal scrolling too.
Look at this example that I created here.
The site you are linking to is not a "horizontal scrolling" page. That's actually pagination not scrolling. If you want to do pagination then you don't need any plug in at all. Just call your AJAX when page or tab link clicked.
i am working on a site that scrolls horizontally. before i put the jquery scroll.to plugin in, i have some work that needs to be ironed out with the anchors.
you can see in the example, when you click to go to box 2, it doesn't go to the right location. then when you click back to box 1 or home, it's placed the content flush to the left side.
this is very similar to a previous question, but it's not answered.
You can see this. This is working great. You can see the source code and try. It is using jquery plugin to smooth scroll.
SEE THIS