Context:
I am trying to achieve this --> https://hhk6r.csb.app/
Mock:
Problem:
Scroll to view on the div element does not scroll to the start of the expansion panel.
Docs:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
I have tried using the block:'start' option provided in the docs, not able to figure out where am i going wrong any suggestions would be helpful.
I have created codesandbox to replicate the issue, this is what I have tried till now.
https://codesandbox.io/s/scroll-issue-kyoxf
On top of your current work, you could properly offset the whole thing with
scroll-margin-top: 2rem;
All kudos go to Josh Comeau and his nice tweet that can be found here: https://twitter.com/joshwcomeau/status/1332015868725891076?lang=en
A simple hack is to properly offset the margin top using scroll-margin-top
Related
Hi I'm currently working on a horizontal scrolling site. I am very much a noob when it comes to javascript but I found a codepen that I modified to suit my needs.
I would like the button element to position sticky within the div but I think due to the javascript in use sticky positioning does not work. I have had a look at the documentation and can't seem to see anything that would work, however, I am very much a novice when it comes to javascript.
button{ position: sticky; }
Would anyone be able to give me a few pointers?
Here is the codepen that I am working on
Based on this original codepen
The js it is using
I very much appreciate any help I can get thanks!
I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
I'm trying to make a webpage that scrolls horizontally using fullpage.js.
I have the divs set-up and it works perfectly when I click the dot menu or use my keyboard to control it. Now I need it to work with scrolling.
So When I scroll down, I want to go to my 2nd div anchor point (just like it does when I press my right arrow key).
Is this possible in anyway? So far I only found this example but does that mean I have to pay incase I want this functionality or am I missing something?
Just set:
scrollHorizontally: true
In your instantiate function.
You can find all the available properties for fullpage here:
https://github.com/alvarotrigo/fullPage.js#fullpagejs
Edit: updated answer. Misread question.
I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.
Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV
You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle