Decreasing slide padding makes scrolling not work

[nokenwari]

Hi.

I've tried to reduce the amount of padding at the top and bottom of the .slide class (to 80px) but find that the navigation links then scroll a bit too far, resulting in the slide title scrolling off the top of the page, especially on a small screen.

I can't see in the JS where this might be caused.

Any suggestions?

[keroberts]

Hi Nokenwari,

This is a little tricky to explain - but here goes.

The padding has been added to the slides as the waypoint script is configured to trigger the navigation .active class when the slide hits the top of the viewport. Also the animation of the slides has been configured to move the slide to the very top of the viewport.

The problem being is that the header is 90px tall.
Therefore at least 90px padding is needed to push the content far enough down to be visible and not underneath the heading.

You can configure waypoint to trigger the navigation change at whatever distance you like from the top of the viewport.
THEN you need to reconfigure the jquery animation to stop at that new point.

In my case i needed my header to be 130px tall. And i didn't want any padding on my slides, as i needed the content to be at the edge.

This is what i did..

Edit script.js:

After the code block:

$(window).stellar();

var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');

---

Add this function

slide.waypoint(function() {
}, { offset: 130 }); // Set your waypoint trigger distance from the top of the viewport

THEN ADD AN OFFSET DISTANCE TO THE JQUERY ANIMATION ALREADY IN THE SCRIPT

function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top -130 // -130 is the offset figure i added
}, 2000, 'easeInOutQuint');
}

Hope that helps...

I haven't fully tested this yet, but it appears to work.

[nokenwari]

Great. Thanks. The offset was exactly what I was looking for.

I wonder if a future mod could get the CSS padding value via jQuery to make adaptation only require changes to the CSS, eg.

var slidepad = $('.slide[data-slide="' + dataslide + '"]').css('padding-top');

Then offset by the slidepad amount.

[keroberts]

Hi Nokenwari,

I have adjusted the script to fetch the .menu height dynamically.
I have also fixed the waypoint accuracy.

See my post here for details:

#38

[nokenwari]

Thanks for your help.

[nettlepatch]

Hi,

I was wondering if you could give me some advice. I am new to this but find your design great. I have removed padding from the grid which is fine. But after my fullsrceen videos there is a bottom line of padding which I need to remove. I have played around with the css and can't figure it out. When I remove content:"" from the grid style it works but breaks everything else. (.clearfix:after{clear:both; content:'';)

I would really love if someone can help me with this, I have been at it for quite a while and my head feels like it may explode. Thanks