固定背景滚动布局

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

 9951  103  查看评论 (5)
固定背景滚动布局 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美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 6387  41

仿淘宝、京东等电商网站楼层跳转滚动定位

实现电商网站的滚动监听、导航定位、返回顶部的功能
  滚动
 3191  59

滚动条

可定制的滚动条,通过js+css实现
  滚动
 25935  52

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 8835  106

讨论这个项目(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;

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

    回复
取消回复