修复Popup以顺利抬起
Fix Popup to lift up smoothly
我创建了一个弹出对话框,当用户滚动页面时,该对话框在左下角向上。你可以在这里看到它的直播-http://uposonghar.com/jobs/odesk/daniel/new/
我的问题是它第一次举起时不顺利,然后就可以了。任何人都请提出任何解决方案。需要让它顺利举起。
我的代码
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
<a href="#close" id="closebox">x</a><a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript代码-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);
我认为您需要css更改,请将以下内容复制粘贴到您的aspx 中
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
希望它能帮助
您所需要做的就是在文档中添加以下行作为第一行
$("#scrolltriggered").css({bottom: -235});
这将确保弹出窗口向下滚动235像素。如果您需要它进行可变滚动,请使用jquery选择器添加Elements高度。
查看Fiddle Here
相关文章:
- 我如何修复包含在captcha的addthis中的错误
- facebook”;添加评论“;popup获胜'不要消失
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 自动修复”;语句前缺少分号“;
- 滚动以修复向上滚动的问题
- 从popup.js|Chrome扩展访问DOM
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- Datatables查询url字符串:需要regex来修复url解析
- 修复选择菜单时的背景图像
- 修复弹出框并使背景滚动
- 修复了使用Jquery的列(表头问题)
- Javascript-修复搜索系统
- 如何修复:当javascript更改DOM时,iOS会删除CSS文件
- 在JavaScript中,如何修复元素显示和变量创建之间的初始差异
- 如何修复 while 循环
- 用javascript修复这个JSON对象字符串最干净的方法是什么
- 如何修复javascript keydown中的延迟
- 如何修复FF和IE中的Javascript无效日期错误
- jQuery Modal Popup-回发后输入类型设置为null
- 修复Popup以顺利抬起