Question

我需要修复＆＃39; middle_block2＆＃39;到固定位置的底部＆＃39; top_block＆＃39;当＆＃39; middle_block2＆＃39;或者#b; middle_block2＆＃39;从窗口顶部开始，或者85px（top_block＆＃39;的高度）到达顶部＆＃39; top_block＆＃39;向下滚动时这是代码和jsfiddle的链接。

当它到达窗口的顶部时，我有它工作，但这是我能够得到的。

jsfiddle：https://jsfiddle.net/jpolsonb/u9adhkc7/1/

HTML

<div class='top_block'>
<p>Top Block</p>
</div>

<div class='middle_block1'>
<p>Middle Block 1</p>
</div>

<div class ='ghost_div'>
<div class='middle_block2'>
<p>Middle Block 2</p>
</div>
</div>

<div class='bottom_block'>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
</div>

CSS

* {
margin:0;
padding:0;
}

.top_block {
width:100%;
background-color: black;
height: 85px;
color:white;
padding: 0px;
margin: 0px;
position:fixed;
}


.middle_block1 {
width:100%;
background-color: yellow;
height: 450px;
color:black;
padding-top: 85px;
z-index:2;
}

.ghost_div {
height: 85px;
background-color: red;
}

.middle_block2 {
width:100%;
background-color: blue;
height: 85px;
color:white;
}

.bottom_block {
width:100%;
background-color: red;
height: 950px;
color:white;
}

JQUERY

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('.middle_block2').css({position: 'fixed', top: '85px'});  
            } else {
                    $('.middle_block2').css({position: 'relative', top: '0px'});
            }
    });

}）;

提前致谢。

Answer 1

请修改这样的代码并检查

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
        if( $(document).scrollTop() > stickyHeaderTop-85 ) {
            $('.middle_block2').css({position: 'fixed', top: '85px'});  
        } else {
            $('.middle_block2').css({position: 'relative', top: '0px'});
        }
    });
});

更新小提琴：https://jsfiddle.net/u9adhkc7/4/

Answer 2

尝试下面提到的代码：

$(function(){
var topBlockheight=$('.top_block').height();
        // Check the initial Position of the fixed_nav_container
        var stickyHeaderTop = $('.middle_block2').offset().top; 
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop-topBlockheight ) {
                        $('.middle_block2').css({position: 'fixed', top: '85px'});  
                } else {
                        $('.middle_block2').css({position: 'relative', top: '0px'});
                }
        });
  });

更新小提琴：https://jsfiddle.net/u9adhkc7/6/

Answer 3

尝试

package proyecto;

import java.util.Scanner;

/**
 *
 * @author Mo
 */
public class Proyecto {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // TODO code application logic here
        //Variables
        Scanner opcion= new Scanner(System.in);
        Scanner socio= new Scanner(System.in);
        Socios identificador= new Socios();
        Scanner var1= new Scanner(System.in), var2 = new Scanner(System.in), var3= new Scanner(System.in), var4 = new Scanner(System.in);
        int a, menu;
        String nsNombre, nsCedula, nsFAF, nsTMEM;

        System.out.println("Bienevenido a Sistema Administrativo del Club.");
        System.out.println("Cargando Sistema...");
        Administrador.boot();

        //boot sistema
        do{        
        System.out.println("Digite el numero de la opcion a elegir:");
        System.out.println("1. Consultar informacion de socio.");
        System.out.println("2. Crear nuevo socio.");
        System.out.println("3. Modificar socio existente.");
        System.out.println("4. Consultar reserva.");
        System.out.println("5. Realizar Reserva.");

        menu = opcion.nextInt();//Opcion(Integer) menu

            do{
            if(menu>6||menu<1){
                System.out.println("El dato ingresado no es valido.");
                System.out.println("Digite el numero de la opcion a elegir:");
                System.out.println("1. Consultar informacion de socio.");
                System.out.println("2. Crear nuevo socio.");
                System.out.println("3. Modificar socio existente.");
                System.out.println("4. Consultar reserva.");
                System.out.println("5. Realizar Reserva.");
                System.out.println("6.Salir.");
                 a=opcion.nextInt();
            }
        }while(menu<1||menu>6);

        switch(menu){
            case 1://Consultar info de Socio
                System.out.println("Por favor ingrese el numero de id del socio.");
                a = socio.nextInt();
                identificador.consultarSocio(a);
                break;
            case 2://Crean nuevo socio
                System.out.println("Por favor ingrese el Nombre completo.");
                nsNombre= var1.next();
                System.out.println("Por favor ingrese el numero de cedula.");
                nsCedula= var2.next();
                System.out.println("Por favor ingrese la fecha de afiliacion.");
                nsFAF=var3.next();
                System.out.println("Por favor ingrese el tipo de membresia.");
                nsTMEM=var4.next();

                Socios test= new Socios();
                test.crearSocio(nsNombre, nsCedula, nsFAF, nsTMEM);


                break;
            case 3://Modificar socio
                break;
            case 4://Ver Reserva
                break;
            case 5://Reservar
                break;

            }    
        } while(menu!=6);

    }
}

当位置从滚动窗口顶部达到85px时修复div

3 个答案: