固定导航在设备大小时与水平内容一起滚动

Question

＆＃13;

＆＃13;

$(function() {
    var pull        = $('#pull');
        menu        = $('nav ul');
        menuHeight  = menu.height();
 
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
});
$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
}); 





/**
 * HorizonScroll
 * Version: 1.1.0
 * URL: https://github.com/trgraglia/jquery.horizonScroll.js/
 * Description: This is a jQuery plugin which allows for websites to scroll left and right.
 * Requires: jQuery 1.10.2
 * Optional: jQuery TouchSwipe (http://labs.rampinteractive.co.uk/touchSwipe/)
 * Author: Anthony Graglia
 * Copyright: Copyright 2013 Anthony Graglia
 * License: MIT License
 */

// Semicolon to prevent breakage with concatenation.
;
(function ($) {
    'use strict';

    $.fn.horizon = function (options, i) {
        if (options === 'scrollLeft') {
            scrollLeft();
        } else if (options === 'scrollRight') {
            scrollRight();
        } else if (options === 'scrollTo') {
            if (isNumeric(i)) {
                scrollTo(+i, $.fn.horizon.defaults.scrollDuration);
            } else {
                scrollToId(i, $.fn.horizon.defaults.scrollDuration);
            }
        } else {
            $.extend($.fn.horizon.defaults, options);

            $.fn.horizon.defaults.sections = this;
            $.fn.horizon.defaults.limit = this.length;
            $.fn.horizon.defaults.i = 0;

            sizeSections();

            $(document).on('mousewheel DOMMouseScroll', function (e) {
                // Equalize event object.
                var evt = window.event || e;
                // Convert to originalEvent if possible.
                evt = evt.originalEvent ? evt.originalEvent : evt;
                // Check for detail first, because it is used by Opera and FF.
                var delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta;

                scrollAction(delta);
            }).on('click', '.horizon-next', function () {
                scrollRight();
            }).on('click', '.horizon-prev', function () {
                scrollLeft();
            }).on('click', 'a[href^="#"]', function () {
                var hash = $(this).attr('href');
                if (-1 < hash.indexOf('#')) {
                    scrollToId(hash.split('#')[1], $.fn.horizon.defaults.scrollDuration);
                }
            });

            if ($.fn.horizon.defaults.swipe) {
                $(document).swipe({
                    // Generic swipe handler for all directions.
                    swipe: function (event, direction, distance, duration, fingerCount) {
                        if (scrolls[direction]) {
                            scrolls[direction]();
                        }
                    },
                    /*click: function (event, target) {
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();

                     //$(target).click();
                     },
                     tap: function (event, target) {
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();

                     $(target).click();
                     },*/
                    // Default is 75px, set to 0 for demo so any distance triggers swipe
                    threshold: 75
                });
            }

            $(window).on('resize', function () {
                sizeSections();
            }).on('keydown', function (e) {
                if (scrolls[e.which]) {
                    scrolls[e.which]();
                    e.preventDefault();
                }
            });

            return this;
        }
    };

    $.fn.horizon.defaults = {
        scrollTimeout: null,
        scrollEndDelay: 250,
        scrollDuration: 400,
        i: 0,
        limit: 0,
        docWidth: 0,
        sections: null,
        swipe: true,
        fnCallback: function (i) {
        }
    };

    function isNumeric(num) {
        return !isNaN(num)
    }

    function scrollToId(id, speed) {
        var i = -1;
        $.fn.horizon.defaults.sections.each(function (index, element) {
            if (id === $(this).attr('id')) {
                i = index;
            }
        });

        if (0 <= i) {
            scrollTo(i, $.fn.horizon.defaults.scrollDuration);
        }
    }

    // HTML animate does not work in webkit. BODY does not work in opera.
    // For animate, we must do both.
    // http://stackoverflow.com/questions/8790752/callback-of-animate-gets-called-twice-jquery
    var scrollTo = function (index, speed) {
        if (index > ($.fn.horizon.defaults.limit - 1) || index < 0) {
            console.log('Scroll where? I think you want me to go out of my limits. Sorry, no can do.');
            return;
        }

        console.log('Scroll to: ' + index);
        $.fn.horizon.defaults.i = index;

        var $section = $($.fn.horizon.defaults.sections[index]);
        $('html,body').animate({scrollLeft: $section.offset().left}, speed, 'swing', $.fn.horizon.defaults.fnCallback(index));

        if (index === 0) {
            $('.horizon-prev').hide();
            $('.horizon-next').show();
        } else if (index === $.fn.horizon.defaults.limit - 1) {
            $('.horizon-prev').show();
            $('.horizon-next').hide();
        } else {
            $('.horizon-next').show();
            $('.horizon-prev').show();
        }
    };

    var scrollLeft = function () {
        console.log('Scroll left');

        var i2 = $.fn.horizon.defaults.i - 1;

        if (i2 > -1) {
            scrollTo(i2, $.fn.horizon.defaults.scrollDuration);
        }
    };

    var scrollRight = function () {
        console.log('Scroll right');

        var i2 = $.fn.horizon.defaults.i + 1;

        if (i2 < $.fn.horizon.defaults.limit) {
            scrollTo(i2, $.fn.horizon.defaults.scrollDuration);
        }
    };

    // Executes on 'scrollbegin'.
    var scrollBeginHandler = function (delta) {
        // Scroll up, Scroll down.
        if (delta > 1) {
            scrollLeft();
        } else if (delta < -1) {
            scrollRight();
        }
    };

    // Executes on 'scrollend'.
    var scrollEndHandler = function () {
        $.fn.horizon.defaults.scrollTimeout = null;
    };

    var scrollAction = function (delta) {
        if ($.fn.horizon.defaults.scrollTimeout === null) {
            scrollBeginHandler(delta);
        } else {
            clearTimeout($.fn.horizon.defaults.scrollTimeout);
        }

        $.fn.horizon.defaults.scrollTimeout = setTimeout(scrollEndHandler, $.fn.horizon.defaults.scrollEndDelay);
    };

    var sizeSections = function () {
        var iInnerWidth = $(window).innerWidth();

        // Store window width and assign it to each panel or section.
        $.fn.horizon.defaults.docWidth = iInnerWidth;
        $.fn.horizon.defaults.sections.each(function () {
            $(this).width(iInnerWidth);
        });

        // Set the page to be a width large enough to include all panels.
        $('html').width($.fn.horizon.defaults.limit * iInnerWidth);

        // Scroll to current section without animation.
        scrollTo($.fn.horizon.defaults.i, 0);
    };

    var scrolls = {
        'right': scrollLeft,
        'down': scrollLeft,
        'left': scrollRight,
        'up': scrollRight,
        37: scrollLeft,
        38: scrollLeft,
        39: scrollRight,
        40: scrollRight
    };

})
(jQuery);
$('section').horizon();

＆＃13;

/*main*/
header {
    background: #f5b335;
    height: 80px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
	z-index:999;
}
@media screen and (max-width: 773px) {
header{
	height:50px;
	position:fixed;
	top:0;
	left:0;
	right:0;
	box-sizing:border-box;}
}


/*nav*/
nav {
    height: 80px;
    width: 100%;
    background: #fff;
    font-size: 11pt;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #fff;
}
nav ul {
    padding: 0;
    width: 100%;
    height: 40px;
	text-align:center;
	margin-bottom:0;
}
nav li {
    display: inline;
    float: left;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

nav a {
    color: #000;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
nav a:hover{
	color:#000;
	text-decoration:none;
	border-bottom:2px black solid;
}
nav a:visited, nav a:active, nav a:link{
	text-decoration:none;
	color:#000;}
nav a#pull {
    display: none;
}       

@media screen and (max-width: 773px) {
    nav {
		height:50px;
        border-bottom: 0;
    }
	nav a{
		line-height:50px;}

    nav ul {
        display: none;
        height: auto;
		background:#fff;
    }
	nav li{
			border-bottom:1px dotted black;	
}
    nav a#pull {
        display: block;
        background-color: #fff;
        width: 100%;
        position: relative;
		text-align:left;
		padding-left:10px;
    }
    nav a#pull:after {
        content:"x";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }
}

@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

/*horizontal*/
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

section {
	position:relative;
    float: left;
    height: 100%;
    padding: 80px 0 0 0;
    margin: 0;
}
@media screen and (max-width: 773px) {
section{
	padding-top:45px;
	
	}
}
#section-section1{
	background:cyan}
#section-section2{
	background:magenta}
#section-section3{
	background:yellow}
#section-section4{
	background:black;}
#section-section5{
	background:red;}
.banner{
	height:30%;
	background:#ccc;
	padding:0;}
.servicesdescription{
	height:60%;
	background:#999;}
.serviceslink{
	height:10%;
	bottom:0;
	text-align:center;
	background:#fff;}
.serviceslink a{
	text-decoration:none;
}
.serviceslinks{
	background:#ccc;
	color:#000;
	padding:20px;
	margin:10px 5px;}
@media screen and (max-width: 773px) {
.servicesdescription{
	height:60%;}

.serviceslinks:visited{
	background:#ccc;
	color:#000;
	}
.serviceslinks:hover, .serviceslinks:active, .currentservices {
	background:#CC0;
	color:#fff;}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Our Services</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css">
    <!-- custom -->
    <link rel="stylesheet" type="text/css" href="style/navigation.css">

    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
<body>
            <header class="navigation nav-down">
<nav class="clearfix">
    <ul class="clearfix">
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">Home</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">2</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">3</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">4</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">5</a></li>
        <li class="col-md-2 col-sm-12 col-xs-6"><a href="#">6</a></li>  
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>
            </header>
        <section data-role="section" id="section-section1" class="ourservices">
        		<div class="banner row">
                		banner 1
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                	<div class="col-md-offset-1" style="background:#000;">
                		<a href="#section-section1"><div class="serviceslinks col-md-2 currentservices">1</div></a>
                		<a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                		<a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                		<a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                		<a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section2" class="ourservices">
        		<div class="banner row">
                		banner 2
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                	<div class="col-md-offset-1" style="background:#000;">
                		<a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                		<a href="#section-section2"><div class="serviceslinks col-md-2 currentservices">2</div></a>
                		<a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                		<a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                		<a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section3" class="ourservices">
        		<div class="banner row">
                		banner 3
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                	<div class="col-md-offset-1" style="background:#000;">
                		<a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                		<a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                		<a href="#section-section3"><div class="serviceslinks col-md-2 currentservices">3</div></a>
                		<a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                		<a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section4" class="ourservices">
        		<div class="banner row">
                		banner 4
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                	<div class="col-md-offset-1" style="background:#000;">
                		<a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                		<a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                		<a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                		<a href="#section-section4"><div class="serviceslinks col-md-2 currentservices">4</div></a>
                		<a href="#section-section5"><div class="serviceslinks col-md-2">5</div></a>                                                                                                
                     </div>
                </div>
        </section>
        <section data-role="section" id="section-section5" class="ourservices">
        		<div class="banner row">
                		banner 5
                </div>
                <div class="servicesdescription row">
                desc
                </div>
                <div class=" serviceslink row">
                	<div class="col-md-offset-1" style="background:#000;">
                		<a href="#section-section1"><div class="serviceslinks col-md-2">1</div></a>
                		<a href="#section-section2"><div class="serviceslinks col-md-2">2</div></a>
                		<a href="#section-section3"><div class="serviceslinks col-md-2">3</div></a>
                		<a href="#section-section4"><div class="serviceslinks col-md-2">4</div></a>
                		<a href="#section-section5"><div class="serviceslinks col-md-2 currentservices">5</div></a>                                                                                                
                     </div>
                </div>
        </section>


</body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>    


</html>

＆＃13;

＆＃13;

＆＃13;

我在relative <nav>的{​​{1}}内修改了导航菜单100% width fixed 和6 <header>的水平内容在桌面上工作得很好，但是当我在设备大小中打开它时出错了。

1. 响应式导航菜单dives模仿下面width的累积width。这是非常宽的，我不能在我停止到第3或第4之前看到导航菜单 格
2. 当到达第5个div时，它向下滚动直到无处
3. 它只是像i-pad尺寸或更小的设备尺寸

我错过了什么？我试图改变我的固定标题宽度的一半50％宽度，但没有运气，它变得更糟。请帮忙

我正在使用bootstrap

来自Responsive Nav
的

导航参考

来自Horizontal Scrolling的水平滚动引用