Bootstrap 3 Off-Canvas边栏菜单就像Facebook一样

Question

问

Bootstrap 3 Off-Canvas边栏菜单就像Facebook一样

小琪宝宝2010 发布于 2023-02-09 10:52

我使用的是引导3的一些实例为当它到达移动关闭帆布侧边栏菜单,在这里可以看到:http://jsfiddle.net/AllenDB/9aAjJ/

如何让画布上的菜单调整为像Facebook的搜索/朋友在线画布菜单一样,它总是从菜单顶部开始,你只能滚动？与我的示例一样,导航栏是固定的,因此可以切换侧边栏菜单.但是,当您向下滚动实际页面并切换菜单时,您必须向上滚动以查看链接.我想看看如何将其调整到菜单从顶部开始的位置并将内容和固定导航栏推到一边,同时能够在菜单内滚动而不是内容？

CSS:

    html,
    body { overflow-x: hidden; }
    body { padding-top: 70px;}
    .navbar { color: #FFF; }
    footer { padding: 30px 0; }


    /*
    * Off Canvas
    * --------------------------------------------------
    */
    @media screen and (max-width: 767px) {
       .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out;  }

       .row-offcanvas-right
       .sidebar-offcanvas { right: -50%; /* 6 columns */ }

       .row-offcanvas-left
       .sidebar-offcanvas { left: -50%; /* 6 columns */ }

       .row-offcanvas-right.active { right: 50%; /* 6 columns */ }

       .row-offcanvas-left.active { left: 50%; /* 6 columns */ }

       .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ }
    }

HTML:

LOGO

SEARCH BAR

TWO LINKS

Link
Link
Link
Link
Link
Link
Link
Link
Link
Link

Hello, world!
This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
View details »

Zim.. 6

如果我理解了这个问题,我认为你希望侧栏滚动与主要内容无关.

看看这个Bootply示例是否有效..

http://bootply.com/101543

Facebook样式模板:http: //www.bootstrapzero.com/bootstrap-template/facebook

1 个回答

如果我理解了这个问题,我认为你希望侧栏滚动与主要内容无关.

看看这个Bootply示例是否有效..

http://bootply.com/101543

Facebook样式模板:http: //www.bootstrapzero.com/bootstrap-template/facebook

2023-02-09 10:55 回答

鱼鱼

撰写答案