Community Learn Tools Library Leisure

English

Home > Backend Development > PHP Tutorial > Please tell me how to achieve the effect on the picture? This community

Please tell me how to achieve the effect on the picture? This community

WBOY

Release： 2023-03-01 22:18:01

Original

1007 people have browsed it

Please tell me how to achieve the effect on the picture? This community

Reply content:

Please tell me how to achieve the effect on the picture? This community

<code class="html"><div class="tips">
    xxxxx
</div></code>

Copy after login

<code class="css">.tips{
    position:fixed;
    display:block;
    bottom:0;
    left:0;
    height:100px;
    width:100%;
    background:#ccc;
    color:#fff;
    z-index:999;
}</code>

Copy after login

Use fixed positioning

HTML:

<code><div class="nologin">
    这个是内容
</div></code>

Copy after login

css

<code>.nologin{
    position:fixed; 
    bottom:0;
    left:0;
    height:100px;
    width:100%;
    background:#eee;
    color:#333;
    z-index:999;
    display:none
}</code>

Copy after login

Then hide and listen for scroll events. When the scroll is larger than the position you want, the prompt will be displayed, otherwise it will be hidden

Related labels：

css html html5 java php

source：php.cn

Previous article：What type of projects is generally suitable for the development of Ci framework? ? Next article：Is it safe to output error messages in a production environment?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn