用jquery实现网站下拉出现广告框。

Coding_Allen

于 2015-04-18 10:13:29 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发总结

本文链接：https://blog.youkuaiyun.com/Coding_Allen/article/details/45110913

前端开发总结专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何使用jQuery来实现一个网站下拉时显示广告框的效果。当用户滚动到页面底部，广告框会消失；回到顶部时，广告框重新出现。同时，提供了关闭广告的功能，一旦关闭，将不再显示。通过设置cookie来判断是否为首次访问，以确保广告只在首次访问时显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery实现网站下拉出现广告框。

当用户访问网站时，下拉出现广告框，一直下拉到底部，广告框消失，再返回到顶部，广告框出现。关闭后，广告框再也不出现。

//监听滚动

vm.scroll_flag = 0;
$(window).scroll(function() {
    var footer_fixed_bar = $('.footer-fixed-bar');
    var scroll_top = $(document).scrollTop();
    if(vm.scroll_flag <= 1) {
        if(vm.scroll_flag == 0 && scroll_top > 10) {
            footer_fixed_bar.fadeIn(300);
            vm.scroll_flag = 1;
        }
        if(scroll_top <= 10 && vm.scroll_flag == 1) {
            footer_fixed_bar.fadeIn(300);
        }
        if(scroll_top < ($(document).height() - $(window).height() - 100)) {
            footer_fixed_bar.fadeIn(300);
        }
        else {
            footer_fixed_bar.fadeOut(300);
        }
    }
});

//关闭事件

$(function() {
    $('.fixed-bar-close').click(function() {
        $('.footer-fixed-bar').fadeOut(300);
        vm.scroll_flag = 2;
    });
    document.cookie = "is_first_visit=" + escape('first_visit');    //写入cookie用来判断是否第一次访问
});

//是否为第一次访问
function isFirstVisit() {
    var all_cookies = document.cookie;
    var position = all_cookies.indexOf('is_first_visit');
    if(position != -1) {
        return false;
    }
    return true;
};