不使用CSS位置的Javascript/jQuery粘滞:已修复 [英] Javascript / jQuery sticky without using css position: fixed

问题描述

我正在寻找用于粘滞标头的Javascript/jQuery插件，该插件不会将元素的样式切换为固定位置.通常，我正在与此 http://stickyjs.com/一起工作，并且工作正常.

I'm looking for a Javascript/jQuery plugin for sticky header that will not switch the element's style to position fixed. Usually, I'm working with this one http://stickyjs.com/ and it works fine.

我正在使用jQuery动画制作网站，并且我的一个div的标题页宽度为100％.但是，当我将其向左移动(例如)时，width:100％现在是基于窗口的宽度而不是其容器的.

I'm working on a website with jQuery animation and one of my div has a sticky header with width:100%. But when I move it to the left (for example), the width:100% is now based on the window's width and not his container.

那么，是否有一个现有的插件，其功能与其他插件相同，但保持位置:相对并计算scrollTop用作我的粘性标头的页边空白?

So, is there an existing plugin that does the same thing as the others but keep the position: relative and calculate the scrollTop to apply as the margin-top for my sticky header?

推荐答案

所以，我解决了我的问题！这是我的JavaScript代码:

So, I solved my problem! Here's my javascript code:

您必须将top:0px设置为默认值

You have to set top:0px as default

function relative_sticky(id, topSpacing){

if(!topSpacing){ var topSpacing = 0; }

var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
    el_top = el_top - parseFloat(document.getElementById(id).style.top);
    el_top = el_top * (-1);
    el_top = el_top + topSpacing;

    if(el_top > 0){
    document.getElementById(id).style.top = el_top + "px";
    } else{
    document.getElementById(id).style.top = "0px";
    }
}

window.onscroll = function(){

    relative_sticky("your_element_id", 10);
}

在IE中不是很流畅，所以我添加了一个延迟:

It's not very smooth in IE, so I add a delay:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

window.onscroll = function(){

    if(BrowserDetect.browser == "Explorer" || BrowserDetect.browser == "Mozilla"){
    // or your own way to detect browser

        delay(function(){
        relative_sticky("admin_users_head", 31);
        }, 200);
    }
    else{
    relative_sticky("admin_users_head", 31);
    }
}

这篇关于不使用CSS位置的Javascript/jQuery粘滞:已修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！