我想也许我在想这个，但基本上我在页面上生成了一些按钮。这些是特定于页面并在加载时生成的。所以我无法重新生成按钮。我想要做的是滚动，让按钮向右移动然后滑入，并在向下滚动时逐渐变为可见。当原始位置，文档中的较高位置再次可见时，我想淡出按钮并淡入按钮的原始位置。我一直在尝试一些不同的事情，但是我先是依附了我的原创作品，然后是我最新的控制状态的尝试。
第一次尝试没问题。
$(window).on("load mousewheel scroll",function(e){
if (!$('.home').length){
/*
* clone and add new id
*/
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
var scrollBarSize = getScrollBarWidth();
var wrapRequestSide = $('#wrapRequestSide');
var wrapRequestSideWidth = $('#wrapRequestSide').outerWidth();//button containing div width
var wrapRequestSideHeight = $('#wrapRequestSide').outerHeight();//button containing div height
var mainContainerW = $('#windowWidth').outerWidth();//outer page container width
var pageTopRequestW = $('#pageTopRequest').width();//button width
var pageTopRequestH = $('#pageTopRequest').height();//button height
if (wrapRequestSide.length) {//if button container exists
var get_window_top = $(document).scrollTop();
var get_window_right = document.body.clientWidth;
//window width - scrollbar viewport function
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
/**/
var vWidth = viewport().width;//viewport width
var bodyStart = $('#wrapper').offset().top;//body of content start position
if (get_window_top >= bodyStart) {//if top of window i greater or = to the start of the body content/button position.
$(wrapRequestSide).css({
"position": "fixed",
"left": mainContainerW - (wrapRequestSideWidth - pageTopRequestW - pageTopRequestH) - scrollBarSize + "px",
"opacity": "0",
"z-index": "50",
"-webkit-transform": "rotate(-90deg)",
"-moz-transform": "rotate(-90deg)",
//"opacity":"1",
/*"padding-bottom" : "90px",
"font-size" : "16px"*/
});
$(window).bind('mousewheel scroll', function(event) {
// alert('bind');
if (event.originalEvent.wheelDelta >= 0) {//scroll up
}
else {//scroll down
var get_window_topSub = $(document).scrollTop();
var bodyStartSub = $('#wrapper').offset().top;
if($(wrapRequestSide).css('opacity') >= 0 && get_window_topSub >= bodyStartSub) {
increaseOpacity();
function increaseOpacity () {
x = 0;
scrollDist = wrapRequestSideHeight;
y = 0;
$(window).bind('mousewheel scroll', function(event) {
op = parseFloat(wrapRequestSide.css('opacity'));
if(op >= 0 && op <=1 ){ op = parseFloat(op+0.01);/*console.log(op);*/ }
//console.log(op);
$(wrapRequestSide).css({
"opacity" : op,
//"left" : + cssChange() + "px"
"left": mainContainerW - (wrapRequestSideWidth - pageTopRequestW - pageTopRequestH)-cssChange() - scrollBarSize + "px"
});
function cssChange() {
if(y < scrollDist){return y+=2.5}
}
});
};//end function increaseOpacity
}
else {
$(wrapRequestSide).removeAttr( "style" );
}
}
});
}//if get_window_top >=bodyStart end
else {
stop();
$(wrapRequestSide).removeAttr( "style" );
}
}//if nav.length
}//if !home end
});
第二次尝试不那么漂亮
$(window).on("load",function(e){
var setState = 0;
if (!$('.home').length){
$(window).on("mousewheel scroll",function(e){
/*
* clone and add new id
*/
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
var scrollBarSize = getScrollBarWidth();
var wrapRequestSide = $('#wrapRequestSide');
var wrapRequestSideWidth = $('#wrapRequestSide').outerWidth();//button containing div width
var wrapRequestSideHeight = $('#wrapRequestSide').outerHeight();//button containing div height
var mainContainerW = $('#windowWidth').outerWidth();//outer page container width
var pageTopRequestW = $('#pageTopRequest').width();//button width
var pageTopRequestH = $('#pageTopRequest').height();//button height
if (wrapRequestSide.length) {//if button container exists
var get_window_top = $(document).scrollTop();
var get_window_right = document.body.clientWidth;
//window width - scrollbar viewport function
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
/**/
var vWidth = viewport().width;//viewport width
var bodyStart = $('#right-content').offset().top;//body of content start position
if (get_window_top >= bodyStart) {//if top of window i greater or = to the start of the body content/button position.
if(setState == 0) {
//alert('is 0');
$(wrapRequestSide).css({
"position": "fixed",
"left": mainContainerW - (wrapRequestSideWidth - pageTopRequestW - pageTopRequestH) - scrollBarSize + "px",
"opacity": "0",
"z-index": "50",
"-webkit-transform": "rotate(-90deg)",
"-moz-transform": "rotate(-90deg)",
//"opacity":"1",
/*"padding-bottom" : "90px",
"font-size" : "16px"*/
});
setState = 1;
}
//console.log(setState);
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
var get_window_topSub = $(document).scrollTop();
var bodyStartSub = $('#wrapper').offset().top;
if($(wrapRequestSide).css('opacity') >= 0) {
increaseOpacity();
function increaseOpacity () {
x = 0;
scrollDist = wrapRequestSideHeight;
y = 0;
$(window).bind('mousewheel scroll', function(event) {
op = parseFloat(wrapRequestSide.css('opacity'));
if(op >= 0 && op <=1 ){ op = parseFloat(op+0.01);/*console.log(op);*/ }
//console.log(op);
$(wrapRequestSide).css({
"opacity" : op,
//"left" : + cssChange() + "px"
"left": mainContainerW - (wrapRequestSideWidth - pageTopRequestW - pageTopRequestH)-cssChange() - scrollBarSize + "px"
});
function cssChange() {
if(y < scrollDist){return y+=2.5}
}
});
};//end function increaseOpacity
}
/*else {
$(wrapRequestSide).removeAttr( "style" );
}*/
/*
* scroll down end
*/
} else {
// upscroll code
var get_window_topSub = $(document).scrollTop();
var bodyStartSub = $('#wrapper').offset().top;
if($(wrapRequestSide).css('opacity') >= 0) {
increaseOpacity();
function increaseOpacity () {
x = 0;
scrollDist = wrapRequestSideHeight;
y = 0;
$(window).bind('mousewheel scroll', function(event) {
op = parseFloat(wrapRequestSide.css('opacity'));
if(op >= 0 && op <=1 ){ op = parseFloat(op+0.01);/*console.log(op);*/ }
//console.log(op);
$(wrapRequestSide).css({
"opacity" : op,
//"left" : + cssChange() + "px"
"left": mainContainerW - (wrapRequestSideWidth - pageTopRequestW - pageTopRequestH)-cssChange() - scrollBarSize + "px"
});
function cssChange() {
if(y < scrollDist){return y+=2.5}
}
});
};//end function increaseOpacity
}
/*else {
$(wrapRequestSide).removeAttr( "style" );
}*/
/*
* upscroll end
*/
}
lastScrollTop = st;
}); // alert('bind');
}//if get_window_top >=bodyStart end
else {
setState = 0;
//console.log(setState);
$(wrapRequestSide).animate({"left":"","position":"","transform":""}, "slow");
}
}//if nav.length
});//scroll
}//if !home end
});