first i' m sorry in advance i'm new in javascript :p i' m trying to integrate the virtualscroll.js i found here in my webpage no problem for the moment but ... I can' t find a solution for integrate this script to all my page and have my home section that taking 100% of the browser :/ also i can' t find how to keep my menu having a scroll spy ( when i m scrolling on the page the underline of the menu move automatically ) i saw examples of the effect i want like: http://ift.tt/1L4tOA8 the home page is always in 100% of the browser :/ i understand that i can' t get all my section at 100% of the browser but i only need my home page like that
SO there is my website code:
// JavaScript Document
/*
* jQuery One Page Nav Plugin
* http://ift.tt/QUDkjx
*
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://ift.tt/wtAawQ
*
* @version 3.0.0
*
* Example usage:
* $('#nav').onePageNav({
* currentClass: 'current',
* changeHash: false,
* scrollSpeed: 750
* });
*/
;(function($, window, document, undefined){
// our plugin constructor
var OnePageNav = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};
// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems: 'a',
currentClass: 'current',
changeHash: false,
easing: 'swing',
filter: '',
scrollSpeed: 750,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},
init: function() {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.$nav = this.$elem.find(this.config.navItems);
//Filter any links out of the nav
if(this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}
//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
//Get the section positions
this.getPositions();
//Handle scroll changes
this.bindInterval();
//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
return this;
},
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},
bindInterval: function() {
var self = this;
var docHeight;
self.$win.on('scroll.onePageNav', function() {
self.didScroll = true;
});
self.t = setInterval(function() {
docHeight = self.$doc.height();
//If it was scrolled
if(self.didScroll) {
self.didScroll = false;
self.scrollChange();
}
//If the document height changes
if(docHeight !== self.docHeight) {
self.docHeight = docHeight;
self.getPositions();
}
}, 250);
},
getHash: function($link) {
return $link.attr('href').split('#')[1];
},
getPositions: function() {
var self = this;
var linkHref;
var topPos;
var $target;
self.$nav.each(function() {
linkHref = self.getHash($(this));
$target = $('#' + linkHref);
if($target.length) {
topPos = $target.offset().top;
self.sections[linkHref] = Math.round(topPos);
}
});
},
getSection: function(windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
for(var section in this.sections) {
if((this.sections[section] - windowHeight) < windowPos) {
returnValue = section;
}
}
return returnValue;
},
handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
self.scrollTo(newLoc, function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if(self.config.end) {
self.config.end();
}
});
}
e.preventDefault();
},
scrollChange: function() {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;
//If the position is set
if(position !== null) {
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
//If it's not already the current section
if(!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);
//If there is a scrollChange callback
if(this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},
scrollTo: function(target, callback) {
var offset = $(target).offset().top;
$('html, body').animate({
scrollTop: offset
}, this.config.scrollSpeed, this.config.easing, callback);
},
unbindInterval: function() {
clearInterval(this.t);
this.$win.unbind('scroll.onePageNav');
}
};
OnePageNav.defaults = OnePageNav.prototype.defaults;
$.fn.onePageNav = function(options) {
return this.each(function() {
new OnePageNav(this, options).init();
});
};
})( jQuery, window , document );
html, body {
height:100%;
}
body {
margin: 0 0 0 0;
}
#content {
width:100%;
height:100%;
}
/*------menu------ */
.menu {
margin-top: 25%;
position:fixed;
width: 50%;
right: -25%;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: 20px 0 10px 0;
margin: 0;
text-decoration: none;
color: #333;
}
.one.current ~ hr {
margin-left: 0%;
}
.two.current ~ hr {
margin-left: 25%;
}
.three.current ~ hr {
margin-left: 50%;
}
.four.current ~ hr {
margin-left: 75%;
}
.one:hover ~ hr {
margin-left: 0%;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: rgba(0,0,0,1);
border: none;
transition: .3s ease-in-out;
}
/*------menu fin------ */
/*------section------ */
.section {
width:100%; height:100%; text-align:center; display:table; color:#fff; font-size:60px; font-weight:800; text-shadow:1px 1px 0 rgba(0,0,0,0.5); letter-spacing:-2px; text-transform:uppercase;
}
.page {
display:table-cell; vertical-align:middle;
}
#home {
background:rgba(0,153,153,1) center no-repeat fixed;
-webkit-background-size:cover;
}
#work {
background: rgba(0,102,153,1) center no-repeat fixed;
-webkit-background-size:cover;
}
#about {
background: rgba(204,102,0,1) center no-repeat fixed;
-webkit-background-size:cover;
}
#contact {
background: rgba(153,0,102,1) center no-repeat fixed;
-webkit-background-size:cover;
}
/*------section fin------ */
<script src="http://ift.tt/1qRgvOJ"></script>
<script>
$(document).ready(function() {
$('.menu li:eq(0)').addClass('current');
$('.menu').onePageNav();
});
</script>
<body>
<div class="pace"></div>
<div id="content">
<ul class="menu">
<li class="one"><a href="#home">home</a></li><!--
--><li class="two"><a href="#work">work</a></li><!--
--><li class="three"><a href="#about">about</a></li><!--
--><li class="four"><a href="#contact">contact</a></li>
<hr />
</ul>
<div class="section" id="home">
<div class="page">
WELCOME
</div>
</div>
<div class="section" id="work">
<div class="page">
WORK
</div>
</div>
<div class="section" id="about">
<div class="page">
ABOUT ME
</div>
</div>
<div class="section" id="contact">
<div class="page">
CONTACT
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire