http://www.codefundamentals.com/cadeui/
I swear I’ve tried it all. I tried giving the body a top padding equal to the navs height, but when I click the menu items, it sitll doesn’t scroll to the right position. What plugin is best for this? How can I modify this plugin to scroll correctly? View source for details.
It seems to me that the vertical height of the top nav just needs to be added to the scroll position. The Scrollit options has a topOffset that you can set to achieve that.
With the Features menu choice, the above solution will to push the page down below the nav, so that the “Why use CadeUI” will then come in to view.
With Testimonials and others below it, they will only scroll to the right place if there’s enough content below them. What can help there is to add an empty section at the bottom of the page.
I swear I saw that and I tried it but it only pushed the menu down.
How do I make it scroll to the correct position though? I try adding in the nav height and featuers will scroll to the right position but then testimonials won’t be far enough!
If I go from the bottom of the page and click items, it scrolls down.
Top of the page to testimonials goes too far.
Hi there RyanReese,
this CSS works for “FEATURES” and “TESTIMONIALS”…
#features {
padding-top:110px;
}
#testimonials h4{
padding-top:160px;
}
coothead
I thought of that but it seems to be a band-aid fix.
What’s even stranger is the first click on testimonials takes you to the wrong place, but a second click on the same nav heading for testimonials then scrolls to the right place.
What plugin do you recommend? I’m sure you have your favorite plugin for this functionality. If not, then you know of a good one based off your interactions on the JS forum.
Aha! I see the problem.
When the testimonials heading is near the bottom of the screen, some CSS uses a beautiful effect to push that section further down and reduce its opacity.
That further down location is where the page is then scrolled to. Because the page is not down there any more, CSS doing its proper job removes that effect from the heading and it moves up to where it should be, which is now too high.
A test - remove the scrollflow and see if the problem resolves itself. If it does, you now have ammunition to help you figure out what needs to be done to get them both working together.
Yeah that worked. However now I need to find a replacement plugin that does that. Do you haev any suggestions?
There’s no need to remove scrollflow just yet. It’s entirely possible to have them both work together, such as by triggering the scroll a few times each second and checking if the page scrolls by a little or a lot.
I’m not sure how to debug that though - that’s beyond me.
Yeah I can’t even really tell where I should modify this
/*
* jQuery ScrollFlow plugin
*
* Copyright (c) 2015 Christian Witte
* licensed under MIT license.
*
* https://github.com/eskju/eskju-jquery-scrollflow
*
* Version: 1.0.0
*
* Licensed under MIT license.
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
* and associated documentation files (the "Software"), to deal in the Software without restriction,
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial
* portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
* LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
$(document).ready(function(){new ScrollFlow}),$.fn.ScrollFlow=function(t){new ScrollFlow(t)},ScrollFlow=function(t){this.init(t)},$.extend(ScrollFlow.prototype,{init:function(t){this.options=$.extend({useMobileTimeouts:!0,mobileTimeout:100,durationOnLoad:0,durationOnResize:250,durationOnScroll:500},t),this.lastScrollTop=0,this.bindScroll(),this.bindResize(),this.update(this.options.durationOnLoad)},bindScroll:function(){var t=this;$(window).scroll(function(){t.update()}),$(window).bind("gesturechange",function(){t.update()})},bindResize:function(){var t=this;$(window).resize(function(){t.update(t.options.durationOnResize)})},update:function(t){var o=this;winHeight=$(window).height(),scrollTop=$(window).scrollTop(),$(".scrollflow").each(function(a,s){objOffset=$(s).offset(),objOffsetTop=parseInt(objOffset.top),effectDuration=o.options.durationOnScroll,effectDuration="undefined"!=typeof t?t:effectDuration,effectiveFromPercentage=isNaN(parseInt($(s).attr("data-scrollflow-start")/100))?-.25:parseInt($(s).attr("data-scrollflow-start"))/100,scrollDistancePercentage=isNaN(parseInt($(s).attr("data-scrollflow-distance")/100))?.5:parseInt($(s).attr("data-scrollflow-distance"))/100,effectiveFrom=objOffsetTop-winHeight*(1-effectiveFromPercentage),effectiveTo=objOffsetTop-winHeight*(1-scrollDistancePercentage),parallaxScale=.8,parallaxOpacity=0,parallaxOffset=-100,factor=0,scrollTop>effectiveFrom&&(factor=(scrollTop-effectiveFrom)/(effectiveTo-effectiveFrom),factor=factor>1?1:factor),options={opacity:1,scale:1,translateX:0,translateY:0},$(s).hasClass("-opacity")&&(options.opacity=0+factor),$(s).hasClass("-pop")&&(options.scale=.8+.2*factor),$(s).hasClass("-slide-left")&&(options.translateX=-1*(-100+100*factor)),$(s).hasClass("-slide-right")&&(options.translateX=-100+100*factor),$(s).hasClass("-slide-top")&&(options.translateY=-1*(-100+100*factor)),$(s).hasClass("-slide-bottom")&&(options.translateY=-100+100*factor),$(s).css({webkitFilter:"opacity("+options.opacity+")",mozFilter:"opacity("+options.opacity+")",oFilter:"opacity("+options.opacity+")",msFilter:"opacity("+options.opacity+")",filter:"opacity("+options.opacity+")",webkitTransform:"translate3d( "+parseInt(options.translateX)+"px, "+parseInt(options.translateY)+"px, 0px ) scale("+options.scale+")",mozTransform:"translate3d( "+parseInt(options.translateX)+"px, "+parseInt(options.translateY)+"px, 0px ) scale("+options.scale+")",oTransform:"translate3d( "+parseInt(options.translateX)+"px, "+parseInt(options.translateY)+"px, 0px ) scale("+options.scale+")",msTransform:"translate3d( "+parseInt(options.translateX)+"px, "+parseInt(options.translateY)+"px, 0px ) scale("+options.scale+")",transform:"translate3d( "+parseInt(options.translateX)+"px, "+parseInt(options.translateY)+"px, 0px ) scale("+options.scale+")",transition:"all "+effectDuration+"ms ease-out"})})}});
This is the scrollflow.js
I don’t think that scrollflow needs to be modified at all.
You know how clicking again on the nav button gets it scrolled to the right place? I’m thinking of just doing that with JavaScript instead.
I’ll see what I can come up with.
Ok thank you. I’m not sure because clicking it actually takes you to the right spot minus the scrollflow interfering.
Here’s something that does the job. There may be better ways, but this one currently works.
// Due to screen changes from scrollflow interfere with scrollit, we
// wait for scrollflow to settle down after scrolling, then click the
// nav button again.
$('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
e.preventDefault();
var target = e.target,
scrollStart = $('body').scrollTop(),
scrollTop = scrollStart,
checkScroll;
// Due to screen effects ocuring while scrolling, we need to wait for scrolling to finish
// before checking that we're in the right place.
// Here, if we've scrolled any distance then we click again to scroll to the correct place.
function clickScrollCheck(el, scrollDistance) {
console.log('scroll distance', scrollDistance);
if (scrollDistance > 0) {
el.click();
}
}
// Have we scrolled any? If we have, keep waiting until we've stopped.
function checkScroll() {
var scroll = this;
if ($('body').scrollTop() === scroll.top) {
clearInterval(scrollInterval);
clickScrollCheck(target, scroll.top - scroll.start);
}
scroll.top = $('body').scrollTop();
}
// Start waiting for scrolling to stop
scrollInterval = setInterval(checkScroll.bind({start: scrollStart, top: scrollTop}), 100);
});
Eh yeah that does work, but do you imagine a way of messing with the plugin to actually do this right? I don’t like that second jump it does while it corrects the positioning.
Also, what are your opinions on scrollflow? I can’t really find any big-name websites using this fade in technique throughout the page, and I wonder if this effect is actually bad and whether people like it. I’m debating just getting rid of it. Thoughts?
Thank you for your current efforts BTW. Really do appreciate it.
Hi there RyanReese,
change this…
[code]
Why use CadeUI?
[/code]…to this…
[code]
Why use CadeUI?
>[/code]…and this…
[code]
What are people saying?
[/code]…to this…
[code]
What are people saying?
>[/code]Notice that I have changed "-slide-top" to “-pop” here, as it was causing the same problem. 
coothead
1 Like
Wow. Brilliant. Played around with it a bit but yeah it seems to be working now! Thanks!!
I can use slide-left/right with no issues so I guess I’ll stick to that.
No problem, you’re very welcome. 
I fully agree - coothead’s solution makes great use of scrollflow instead.