固定背景滚动布局

所属分类:UI-滚动,背景

 35272  422  查看评论 (5)
分享到微信朋友圈
X
固定背景滚动布局 ie兼容8

实现代码

HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
        <section id="fbsection1"></section>
        <section id="fbsection2"></section>
        <section id="fbsection3"></section>
        <section id="fbsection4"></section>
        <section id="fbsection5"></section>
</div>

CSS

/* Set all parents to full height */
html,body,.container,.cbp-fbscroller,.cbp-fbscroller section {
	height:100%;
}
/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
	position:fixed;
	z-index:9999;
	right:100px;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}
.cbp-fbscroller > nav a {
	display:block;
	position:relative;
	color:transparent;
	height:50px;
}
.cbp-fbscroller > nav a:after {
	content:'';
	position:absolute;
	width:24px;
	height:24px;
	border-radius:50%;
	border:4px solid #fff;
}
.cbp-fbscroller > nav a:hover:after {
	background:rgba(255,255,255,0.6);
}
.cbp-fbscroller > nav a.cbp-fbcurrent:after {
	background:#fff;
}
/* background-attachment does the trick */
.cbp-fbscroller section {
	position:relative;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
}
#fbsection1 {
	background-image:url(../images/1.jpg);
}
#fbsection2 {
	background-image:url(../images/2.jpg);
}
#fbsection3 {
	background-image:url(../images/3.jpg);
}
#fbsection4 {
	background-image:url(../images/4.jpg);
}
#fbsection5 {
	background-image:url(../images/5.jpg);

JavaScript

var cbpFixedScrollLayout = (function() {
	// cache and initialize some values
	var config = {
		// the cbp-fbscroller′s sections
		$sections : $( '#cbp-fbscroller > section' ),
		// the navigation links
		$navlinks : $( '#cbp-fbscroller > nav:first > a' ),
		// index of current link / section
		currentLink : 0,
		// the body element
		$body : $( 'html, body' ),
		// the body animation speed
		animspeed : 650,
		// the body animation easing (jquery easing)
		animeasing : 'easeInOutExpo'
	};
	function init() {

		// click on a navigation link: the body is scrolled to the position of the respective section
		config.$navlinks.on( 'click', function() {
			scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
			return false;
		} );

		// 2 waypoints defined:
		// First one when we scroll down: the current navigation link gets updated. 
		// A `new section′ is reached when it occupies more than 70% of the viewport
		// Second one when we scroll up: the current navigation link gets updated. 
		// A `new section′ is reached when it occupies more than 70% of the viewport
		config.$sections.waypoint( function( direction ) {
			if( direction === 'down' ) { changeNav( $( this ) ); }
		}, { offset: '30%' } ).waypoint( function( direction ) {
			if( direction === 'up' ) { changeNav( $( this ) ); }
		}, { offset: '-30%' } );

		// on window resize: the body is scrolled to the position of the current section
		$( window ).on( 'debouncedresize', function() {
			scrollAnim( config.$sections.eq( config.currentLink ).offset().top );
		} );
		
	}
	// update the current navigation link
	function changeNav( $section ) {
		config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' );
		config.currentLink = $section.index( 'section' );
		config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' );
	}

	// function to scroll / animate the body
	function scrollAnim( top ) {
		config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );
	}
	return { init : init };

})();


相关插件-滚动,背景

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 55877  628

仿百度知道(滚动固定标题)插件

仿百度知道滚动固定标题,点击标题滚动到内容块
  滚动
 24259  369

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 36905  373

原生js向上滚动消息框

原生js封装的滚动消息框,简单实用
  滚动
 29593  329

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    [2]彭海峰.xx[Z] 0
    2018/5/9 17:00:07
    移动端怎么实现啊 回复
    、天凉好个秋 0
    2018/1/1 13:28:17

    怎么设置那圆圈的颜色咧?

    回复
    ??? 梦幻 0
    2017/12/1 22:37:40
    Eason~ 0
    2017/9/18 11:07:31

    这个怎么实现的,有什么思路吗

        就叫成长吧!0
        2017/11/6 12:45:16

        background-attachment:fixed;

        试下效果就知道怎么实现了。- -.

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复