Question

我正在尝试在网页上添加顶栏，其中包含2个其他元素：top和0：position。例如，想想一个wp-admin栏和菜单栏固定在最顶层的网站。

我正在创建一个插件＆amp;所以我无法修改网站的代码，但可以覆盖样式。

这是我的CSS：

.bar-render-top
{
    top:0px;
    margin-top: 0px;
    position: fixed;
    z-index: 999999;
    width:100% !important;
}

我可以看到酒吧，但其他人隐藏在它下面。我想要的是“向下移动”。我可以添加自定义css并找到元素的css并添加边距，但由于这是一个插件，它应该适用于任何网站。所以我无法添加特定于网站的样式。

理想情况下，这应该像mozbar chrome插件一样，它会将topbar添加为iframe。

这可能吗？任何帮助将受到高度赞赏。非常感谢。

body {
    background-color: white;
    margin: 0;
    padding: 0;
    padding-top: 90px;
}

.fixed-bar {
    width: 100%;
    position: fixed;
    top: 0;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.bar-1 {
    background-color: gold;
}

.bar-2 {
    background-color: pink;
    margin-top: 40px;
}

.my-bar {
    background-color: blue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
}

<div class="fixed-bar bar-1">
    fixed bar one
</div>
<div class="fixed-bar bar-2">
    fixed bar two
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
    nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
    a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
    eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
    lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
    this has to be on the top of any generic page
</div>

Answer 1

如果您知道栏的高度，可以用自己的块包装页面的所有内容，在其上面添加一些边距，然后使用JS添加栏。也可以为你的酒吧设置背景颜色。以下是使用jQuery的示例：

var path = require('path');
var _root = path.resolve(__dirname, '..');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.css$/,
                exclude: root('src'),
                loader: 'null'
            },
            {
                test: /\.css$/,
                include: root('src'),
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: root('src'),
                loader: 'null'
            },
            {
                test: /\.scss$/,
                include: root('src'),
                loader: 'raw!postcss!sass'
            }
        ]
    }
};

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}

$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');

.bar-render-top
{
    top:0px;
    margin-top: 0px;
    position: fixed;
    z-index: 999999;
    width:100% !important;
    margin-bottom:50px;
    background-color: lightgrey;
}

.bar-render-content
{
  margin-top:30px;
}

Answer 2

我最终在渲染和滚动事件中为固定元素添加了 margin-top。

我的主顶部栏呈现为 <div id="appbar-container">...</div> id（以避免被推送）。然后我就这样做了：

const APPBAR_HEIGHT = 64;

const translateFixed = () => {
    Object.assign(document.body.style, {
      position: "relative",
      top: APPBAR_HEIGHT + "px",
    });

    for (let e of Array.from(document.body.getElementsByTagName("*"))) {
      if (
        e instanceof HTMLElement &&
        e.getAttribute("id") !== "appbar-container"
      ) {
        const position = getComputedStyle(e)
          .getPropertyValue("position")
          .toLocaleLowerCase();
        const top = e.getBoundingClientRect().top;

        if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
          e.style.marginTop = APPBAR_HEIGHT + "px";
          e.classList.add("appbar-offset");
        } else if (e.classList.contains("appbar-offset")) {
          e.style.marginTop = "0";
        }
      }
    }
};

  
// Initial push
translateFixed();

// Push on scroll
document.addEventListener("scroll", translateFixed);

老实说，我并不为此感到自豪，我认为还有改进的余地……但是，它确实有效。

Javascript - 添加顶部固定栏并将所有其他元素向下推

2 个答案: