Skip to content

Instantly share code, notes, and snippets.

@richgcook
Last active March 25, 2019 16:42
Show Gist options
  • Save richgcook/7608ccd910c31e3b83734783df788869 to your computer and use it in GitHub Desktop.
Save richgcook/7608ccd910c31e3b83734783df788869 to your computer and use it in GitHub Desktop.
For Rob
var $content = $('main.page > div.content'),
userScrollPosition = 0;
if (Modernizr.history) {
$(document).on('click', 'a[data-ajax]', function(event) {
event.preventDefault();
var $this = $(this),
url = $this.attr('href');
window.history.pushState(url, null, url);
replacePage(url);
});
// Back button
window.onpopstate = history.onpushstate = function() {
var url = window.location.href;
replacePage(url);
};
}
function replacePage(url) {
$content.addClass('is--loading');
$content.one(transitionEnd, function(event) {
console.log(event.target);
if (event.target.className == 'content is--loading') {
console.log('works');
loadData();
}
$content.off(transitionEnd);
}).children().on(transitionEnd, function(e) {
console.log(e.target);
return false;
});
function loadData() {
$.ajax({
url: url,
beforeSend: function(xhr) {
if ($(window).scrollTop() !== 0) {
userScrollPosition = $(window).scrollTop();
}
},
success: function(data) {
$content.html(data);
ajaxCallback();
},
error: function(data) {
console.error('404 ☹');
}
});
}
}
function ajaxCallback() {
var bodyClass = $('meta[name=body-class]').attr('content');
if (bodyClass !== undefined) document.body.className = bodyClass;
//myLazyLoad.update();
//imgToSVG();
//internalLinks();
//menus();
//inView();
//sliders();
//videoPlayer();
//bodyScrollLock.clearAllBodyScrollLocks();
$(window).scrollTop(userScrollPosition);
$content.removeClass('is--loading');
}
// Rich AJAX code
var $content = $('#single');
$(document).on('click', 'a[data-ajax]', function(event) {
event.preventDefault();
var $this = $(this),
url = $this.attr('href');
window.history.pushState(url, null, url);
replacePage(url);
});
}
function replacePage(url) {
//
function loadData() {
$.ajax({
url: url,
success: function(data) {
$content.html(data);
ajaxCallback();
},
error: function(data) {
console.error('404 ☹');
}
});
}
}
function ajaxCallback() {
var marginTop = $(window).scrollTop();
$("#single").addClass("active").removeClass("inactive");
$("#projects").addClass("locked").removeClass("active");
$("#shade").addClass("active")
$(document).scrollTop(0);
$(".percent").text('1.00');
var scroll = "-" + marginTop;
$("#projects").css('top',- marginTop).css('position','fixed');
console.log('scroll', marginTop);
$('#projects').attr('data-scroll', marginTop);
}
// Single Project Active + Fade Out
$(window).on('resize scroll', function () {
if ($("#single").is(".active")){
var scroll = $(window).scrollTop();
var singleHeight = $('#single').outerHeight();
var offsetH = singleHeight - window.innerHeight;
if (scroll >= offsetH) {
var singleHeight = $('#single').innerHeight();
var offsetScroll = $(window).scrollTop() - offsetH;
var percentage = (offsetScroll / viewportHeight) * 1;
var percentageOppo = 1 -percentage;
$(".percent").text(percentageOppo.toFixed(2));
$("#shade").css("opacity", percentageOppo.toFixed(2));
}
}
// Single project container exit viewport
$('#single').each(function () {
if ($(this).isInViewport()) {
// Do Nothing
} else {
var offset = $('#projects').attr('data-scroll');
$('#projects').removeClass('locked').css('position','relative').css('top','0').addClass('active');
$('#single').removeClass('active').addClass('inactive');
$("#shade").removeClass("active")
$(document).scrollTop(offset);
$('#projects').removeAttr('data-scroll');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment