I'm using https://github.com/peachananr/onepage-scroll to create a one pager and would like to trigger a function (a modal lightbox) when scrolling to a specific section.
I've tried a few different scripts (appear, waypoint) but so far have come up trumps. Not sure if it's got to do with the fact that onepage scroll isn't actually scrolling but moving the section into the viewpoint.
Any help would be highly appreciated!
You could make use of the callbacks the plugin provides.
Also, if you want to change for a more complete plugin such as fullPage.js, there you have the option scrollBar than when set to true will allow plugins such as waypoint or appear to work as expected.
The reason for it is detailed in fullPage.js FAQs:
Parallax, as well as many other plugins which depends on the
scrolling of the site, listens the scrollTop property of javascript.
fullPage.js doesn't actually scroll the site but it changes the top or
translate3d property of the site. Only when using the fullPage.js
option scrollBar:true or autoScrolling:false it will actually scroll
the site in a way it is accessible for the scrollTop property.
The same principle is applied to onepage-scroll but the difference is that fullPage.js provides a way to deal with it (scrollBar:true) and onepage-scroll doesn't.
Related
I implemented a sticky sisebar library that aims to be easy to use as you are free in setting up the sidebar and its CSS. The library only gives you an additional value as custom property (--push-down) you can use in CSS to push the sidebar to its current position.
The problem I'm facing is that the script causes massive jitters in the sidebar position on some devices. These do only occur on the first scroll - if you've scrolled through the site once, it's working fine.
I would like to know why that could be the case (and if it's possible to be fixed. If not I still want to find out what's happening here.)
Using throttle functions does not make a difference here, as described here: https://stackoverflow.com/a/44779316/6336728. I'm already using the suggested method of doing layout read on scroll and layout write with requestAnimationFrame.
I put the code of my GitHub repo in this CodePen to try it out quickly; only the JS part is relevant.
In my code i want on each section i scroll the elements will visible but which is not happening. In first section it is working perfectly but not in second section,I am actually using the fullpage.js as well.But all is working properly except the waypoint.js at second section
$('.ianimator').waypoint(function() {
$('.ianimator').addClass('animated fadeIn');
},{offset:'90%'});
$('.secmator').waypoint(function() {
$('.secmato').addClass('animated fadeIn');
},{offset:'90%'});
DEMO
If you read the fullPage.js FAQs you'll realise that libraries relying on the scroll event won't work in fullPage.js unless you use the fullPage.js option scrollBar:true or autoScrolling:false.
Personally I would recommend you to make use of fullPage.js state classes or callbacks to achieve those animations. This way you can use any fullPage.js configuration.
Here's a video tutorial I made regarding css3 animations and the use of fullpage.js state classes.
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. :)
Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.
I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ?
My client doesn't want any scrollbars and the website works like panels that show when you scroll.
I tried Skrollr, but when I overflow : hidden, it doesn't work.
thanks
I think you always have to write some code to "parallax" the whole thing , but, I once used this library
jQuery mousewheel
https://github.com/brandonaaron/jquery-mousewheel
because I did not want scrollbar's in my website , it was really helpful. It allows you to detect scrolling in every div of your document , so you're not obliged to bind action to window.scroll.
The only issue if you're not using jQuery is that this library requires it.
Anyway I think that jQuery is always a good idea.