0
Ich mache eine Seite Website und ich möchte mit Smint (jquery plugin) auf meiner Webseite im rechten Bereich scrollen. Also habe ich Navbar gemacht und wenn ich Abschnitt1 auf meiner Navbar-Seite klicke, scrolle ich fast oben, aber nicht oben. Meine Navbar-Position ist festgelegt, weil ich möchte, dass sie oben bleibt, wenn ich die Seite durchblättere. Wahrscheinlich liegt das Problem daran, dass Abschnitt1 unter der Navigationsleiste liegt. Und wenn ich auf Abschnitt 2 klicke, springt es zu Abschnitt 2, aber Abschnitt 2 in der Navigationsleiste ist nicht aktiv? Also irgendwelche Ideen wie ich dieses Problem beheben kann.Wie kann ich smint verwenden, um oben auf meiner Website mit einer Seite zu blättern?
//jquery.smint.js
/*
SMINT V1.0 by Robert McCracken
SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
SMINT is my first dabble into jQuery plugins!
http://www.outyear.co.uk/smint/
If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
*/
(function(){
\t $.fn.smint = function(options) {
\t \t var settings = $.extend({
\t \t \t 'scrollSpeed' : 500,
\t \t \t 'mySelector' : 'div'
\t \t }, options);
\t \t // adding a class to users div
\t \t $(this).addClass('smint');
\t \t \t \t
\t \t
\t \t //Set the variables needed
\t \t var optionLocs = new Array(),
\t \t \t lastScrollTop = 0,
\t \t \t menuHeight = $(".smint").height(),
\t \t \t smint = $('.smint'),
\t smintA = $('.smint a'),
\t myOffset = smint.height();
\t \t if (settings.scrollSpeed) {
\t \t \t \t var scrollSpeed = settings.scrollSpeed
\t \t \t }
\t \t if (settings.mySelector) {
\t \t \t \t var mySelector = settings.mySelector
\t \t };
\t \t return smintA.each(function(index) {
\t \t \t var id = $(this).attr('href').split('#')[1];
\t \t \t if (!$(this).hasClass("extLink")) {
\t \t \t \t $(this).attr('id', id);
\t \t \t }
\t \t \t
\t \t \t //Fill the menu
\t \t \t optionLocs.push(Array(
\t \t \t \t $(mySelector+"."+id).position().top-menuHeight,
\t \t \t \t $(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
\t \t \t);
\t \t \t ///////////////////////////////////
\t \t \t // get initial top offset for the menu
\t \t \t var stickyTop = smint.offset().top; \t
\t \t \t // check position and make sticky if needed
\t \t \t var stickyMenu = function(direction){
\t \t \t \t // current distance top
\t \t \t \t var scrollTop = $(window).scrollTop()+myOffset;
\t \t \t \t // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
\t \t \t \t if (scrollTop > stickyTop+myOffset) {
\t \t \t \t \t smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd');
\t \t \t \t \t // add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
\t \t \t \t \t // When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
\t \t \t \t \t $('body').css('padding-top', menuHeight); \t
\t \t \t \t } else {
\t \t \t \t \t smint.css('position', 'relative').removeClass('fxd');
\t \t \t \t \t //remove the padding we added.
\t \t \t \t \t $('body').css('padding-top', '0'); \t
\t \t \t \t }
\t \t \t \t // Check if the position is inside then change the menu
\t \t \t \t // Courtesy of Ryan Clarke (@clarkieryan)
\t \t \t \t if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){ \t
\t \t \t \t \t if(direction == "up"){
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t \t $("#"+optionLocs[index+1][2]).removeClass("active");
\t \t \t \t \t } else if(index > 0) {
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t \t $("#"+optionLocs[index-1][2]).removeClass("active");
\t \t \t \t \t } else if(direction == undefined){
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t }
\t \t \t \t \t $.each(optionLocs, function(i){
\t \t \t \t \t \t if(id != optionLocs[i][2]){
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t $("#"+optionLocs[i][2]).removeClass("active");
\t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t \t }
\t \t \t };
\t \t \t // run functions
\t \t \t stickyMenu();
\t \t \t // run function every time you scroll
\t \t \t $(window).scroll(function() {
\t \t \t \t //Get the direction of scroll
\t \t \t \t var st = $(this).scrollTop()+myOffset;
\t \t \t \t if (st > lastScrollTop) {
\t \t \t \t direction = "down";
\t \t \t \t } else if (st < lastScrollTop){
\t \t \t \t direction = "up";
\t \t \t \t }
\t \t \t \t lastScrollTop = st;
\t \t \t \t stickyMenu(direction);
\t \t \t \t // Check if at bottom of page, if so, add class to last <a> as sometimes the last div
\t \t \t \t // isnt long enough to scroll to the top of the page and trigger the active state.
\t \t \t \t if($(window).scrollTop() + $(window).height() == $(document).height()) {
\t \t \t \t smintA.removeClass('active')
\t \t \t \t $(".smint a:not('.extLink'):last").addClass('active')
\t \t \t \t
\t \t \t \t } else {
\t \t \t \t \t smintA.last().removeClass('active')
\t \t \t \t }
\t \t \t });
\t \t \t ///////////////////////////////////////
\t $(this).on('click', function(e){
\t \t \t \t // gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to
\t \t \t \t var myOffset = smint.height();
\t \t // stops hrefs making the page jump when clicked
\t \t \t \t e.preventDefault();
\t \t \t \t
\t \t \t \t // get the hash of the button you just clicked
\t \t \t \t var hash = $(this).attr('href').split('#')[1];
\t \t \t \t
\t \t \t \t var goTo = $(mySelector+'.'+ hash).offset().top-myOffset;
\t \t \t \t
\t \t \t \t // Scroll the page to the desired position!
\t \t \t \t $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
\t \t \t \t
\t \t \t \t // if the link has the '.extLink' class it will be ignored
\t \t \t \t // Courtesy of mcpacosy (@mcpacosy)
\t \t \t \t if ($(this).hasClass("extLink"))
{
return false;
}
\t \t \t }); \t
\t \t \t //This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll
\t \t \t $('.intLink').on('click', function(e){
\t \t \t \t var myOffset = smint.height();
\t \t \t \t e.preventDefault();
\t \t \t \t
\t \t \t \t var hash = $(this).attr('href').split('#')[1];
\t \t \t \t if (smint.hasClass('fxd')) {
\t \t \t \t \t var goTo = $(mySelector+'.'+ hash).position().top-myOffset;
\t \t \t \t } else {
\t \t \t \t \t var goTo = $(mySelector+'.'+ hash).position().top-myOffset*2;
\t \t \t \t }
\t \t \t \t
\t \t \t \t $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
\t \t \t \t if ($(this).hasClass("extLink"))
{
return false;
}
\t \t \t }); \t
\t \t });
\t };
\t $.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div'};
})(jQuery);
//call smint
$(document).ready(function(){
\t
\t \t \t \t \t $('.menubar').smint();
\t
\t
\t \t \t \t });
\t \t \t \thtml{
\t background: #84b6f4;
\t
}
.box{
\t position: absolute;
\t top: 0;
\t left: 0;
\t height: 46px;
\t width: 100%;
\t margin: 0;
\t padding: 0; \t
\t background-color: black;
\t
\t
}
.nav{
\t position: fixed;
\t top: 0;
\t left: 0;
\t height: 46px;
\t width: 100%;
\t font-family: arial;
\t list-style-type: none;
\t overflow: hidden;
\t margin: 0;
\t padding: 0; \t
\t background-color: #18ac11;
}
.nav li{
\t
\t float: left;
\t
\t
}
.nav li a{
\t display: block;
\t color: black;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
}
.nav li a:hover{
\t background-color: #11740b;
\t
}
/*smint active section*/
.active {
\t background: #25aae1;
}
.section1{
\t background: red;
\t
}
.section2{
\t background: blue;
\t
}
.section3{
\t background: yellow;
\t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
\t \t \t \t
\t \t \t \t
\t <body>
\t \t <div class="menubar">
\t \t \t <ul class="nav">
\t \t \t \t <li><a href="#section1">Selection1</a></li>
\t \t \t \t <li><a href="#section2">Selection2</a></li>
\t \t \t \t <li><a href="#section3">Selection3</a></li>
\t \t \t </ul>
\t \t </div>
\t \t
\t
\t
\t \t
\t \t <div class="section1">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>Section1</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t <div class="section2">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>Section2</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t <div class="section3">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><h1>Section3</h1><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t
\t </body>