See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.
Does anyone know how you might be able to achieve this in freeway?
If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.
The highlighted menu however not yet within the realms of my current knowledge sadly enough, but it can be achieved the same way DIV’s suddenly get sticky … the position of an item within the viewport automatically activates a style in which you can change the details …
In this case I would apply different span classes to each menu item, all with the same CSS references, and each of those span classes would chance at a certain point. This can be achieved the same way the DIV could suddenly become sticky …
Probably would take me a day to figure this out on my own, but there are older and wiser users here that probably can do this within an hour or two
Nevertheless … yes, it can be done. I can do it … and with this example and some knowledge of CSS so can you.
The Sticker Action can indeed make the menu stop scrolling when it reaches the top of the page. The animated rollover is a CSS transition effect. Tim Plumb has made some examples of that, perhaps he can pipe up with the secret sauce. The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.
See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.
Does anyone know how you might be able to achieve this in freeway?
If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.
Forgot to mention – the SmoothScroll Action can do the scroll to place trick, you just need to make Anchors to each section.
Walter
On Jan 3, 2014, at 9:03 PM, Walter Lee Davis wrote:
The Sticker Action can indeed make the menu stop scrolling when it reaches the top of the page. The animated rollover is a CSS transition effect. Tim Plumb has made some examples of that, perhaps he can pipe up with the secret sauce. The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.
See the set of links that are in the black bar below the main picture (Overview, Why They Matter, Threats, etc…). When you scroll down, the black bar moves up the page but when it gets to the top of the window it will lock in place at the top of the browser. If you continue scrolling the page content continues to go up while the black bar stays in place.
Does anyone know how you might be able to achieve this in freeway?
If possible, would also like to know how the different links are highlighted when then appropriate section scrolls into view.
The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.
Well … I think you can do this here :
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
You’ll have to create a couple of instances, one for every menu item. As soon as a DIV that is represented by a menu-item reaches the top, the span-class changes (the example above adds and removes a span class to a DIV style: addClass and removeClass). You might be able to do the same thing with toggleClass.
Thanks for the replies. After a quick test in a blank freeway document, it looks the sticky action will do the trick. However, I am having an issue where it doesn’t seem to be working properly in Safari (I am using version Safari 6.0.5 on Mac OS X 10.8.4 and Freeway 6.1.0).
The item will stick as it should in the appropriate spot, but after it reaches the top of the page it gets stuck and won’t scroll back down. It is working properly in Chrome.
Also, while I tested this in a blank freeway doc without any other items, actions, or scripts, I do plan on making this site responsive. While reading some other posts on the Sticky action, it looks like I might run into some issues? Will this action still work while trying to make images/backgrounds resize with the page and inline items flex with the content?
Just a reminder – this is jQuery code, and will conflict with the Actions I noted earlier. All of this can be rewritten in Prototype.js syntax, which is similar, but not the same.
Walter
On Jan 4, 2014, at 6:13 AM, Richard van Heukelum wrote:
On 4 Jan 2014, 1:04 am, waltd wrote:
The other thing I see here is the “jQuery ScrollSpy” effect, which is highlighting a different segment of the menu as you scroll down the page. Don’t have an immediate solution to that one.
Well … I think you can do this here :
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $(‘#sticky-anchor’).offset().top;
if (window_top > div_top) {
$(‘#sticky’).addClass(‘stick’);
} else {
$(‘#sticky’).removeClass(‘stick’);
}
}
You’ll have to create a couple of instances, one for every menu item. As soon as a DIV that is represented by a menu-item reaches the top, the span-class changes (the example above adds and removes a span class to a DIV style: addClass and removeClass). You might be able to do the same thing with toggleClass.
